Age

Installation

pnpm dlx kliping@latest add number-field

Nonaktif

Age

Decimal

Number

Percentage

Percent

Currency

Balance

Form

Payment

Enter value between 10 and 5000.

Usage

<script setup lang="ts">
import {
  NumberField,
  NumberFieldContent,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput,
} from '@/components/ui/number-field'
</script>

<template>
  <NumberField :default-value="18" :min="0">
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/number-field/number-field.vue components/ui/number-field/number-field-content.vue components/ui/number-field/number-field-decrement.vue components/ui/number-field/number-field-increment.vue components/ui/number-field/number-field-input.vue components/ui/number-field/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<NumberField>
  <NumberFieldContent>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldContent>
</NumberField>

API Reference

NumberField

Prop	Type	Default	Description
defaultValue?	number	—	The initial value when uncontrolled.
modelValue?	number	—	The controlled value. Bind with v-model.
min?	number	—	The smallest value allowed for the input.
max?	number	—	The largest value allowed for the input.
step?	number	—	The amount that the input value changes with each increment or decrement "tick".
stepSnapping?	boolean	—	When false, prevents the value from snapping to the nearest increment of the step value
focusOnChange?	boolean	—	When true, the input will be focused when the value changes.
formatOptions?	Intl.NumberFormatOptions	—	Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
locale?	string	—	The locale to use for formatting and currencies
disabled?	boolean	—	When true, prevents the user from interacting with the Number Field.
readonly?	boolean	—	When true, the Number Field is read-only.
disableWheelChange?	boolean	—	When true, prevents the value from changing on wheel scroll.
invertWheelChange?	boolean	—	When true, inverts the direction of the wheel change.
id?	string	—	Id of the element
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.

Event	Payload	Description
@update:modelValue	[val: number]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: number | undefined; textValue: string; readonly: boolean; }

NumberFieldContent

Slot	Props
#default	—

NumberFieldDecrement

Prop	Type	Default	Description
disabled?	boolean	—	Prevents the user from interacting with it.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"decrement"

NumberFieldIncrement

Prop	Type	Default	Description
disabled?	boolean	—	Prevents the user from interacting with it.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"increment"

NumberFieldInput

Data attribute	Value
[data-slot]	"input"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI NumberField yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Arrow Up	Increase the value
Arrow Down	Decrease the value
Page Up	Increase the value by scale of 10
Page Down	Decrease the value by scale of 10
Home	Set value to minimum (if min is provided)
End	Set value to maximum (if max is provided)

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --input, --muted-foreground, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.