Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.4

NumberInput

NumberInput is a component used to obtain numeric input from the user.

Source@yamada-ui/number-input

Import

import { NumberInput } from "@yamada-ui/react"
Copied!

Usage

Editable example

<NumberInput placeholder="basic" />
Copied!

Change Variant

Editable example

<VStack>
  <NumberInput variant="outline" placeholder="outline" />
  <NumberInput variant="filled" placeholder="filled" />
  <NumberInput variant="flushed" placeholder="flushed" />
  <NumberInput variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

Change Size

Editable example

<VStack>
  <NumberInput placeholder="extra small size" size="xs" />
  <NumberInput placeholder="small size" size="sm" />
  <NumberInput placeholder="medium size" size="md" />
  <NumberInput placeholder="large size" size="lg" />
</VStack>
Copied!

Change Border Color

To change the border color, set a color to focusBorderColor or errorBorderColor.

Editable example

<VStack>
  <NumberInput focusBorderColor="green.500" placeholder="custom border color" />
  <NumberInput
    invalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

Change Placeholder Color

To change the placeholder color, set props to _placeholder.

Editable example

<VStack>
  <NumberInput
    placeholder="custom placeholder"
    _placeholder={{ opacity: 1, color: "gray.500" }}
  />
  <NumberInput
    color="green.500"
    placeholder="custom placeholder"
    _placeholder={{ color: "inherit" }}
  />
</VStack>
Copied!

Set Default Value

To set a default value, set a string or number to defaultValue.

Editable example

<NumberInput defaultValue={18} />
Copied!

Set Minimum and Maximum Values

To set minimum and maximum values, set a number to min or max.

Editable example

<NumberInput defaultValue={18} min={8} max={31} />
Copied!

Set Step Value

To set a step value, set a number to step.

Editable example

<NumberInput defaultValue={15} step={5} min={5} max={30} />
Copied!

Set Decimal Points

To set decimal points, set a number to precision.

Editable example

<NumberInput defaultValue={15} precision={2} step={0.2} />
Copied!

Disable Clamping Value on Blur

By default, the component accepts any numeric input from the user, but values exceeding min or max are automatically adjusted on blur. To disable this automatic adjustment, set clampValueOnBlur to false.

Editable example

<NumberInput defaultValue={15} max={30} clampValueOnBlur={false} />
Copied!

Allow Out-of-Range Values

In some scenarios, you may not want to block out-of-range values. In that case, set keepWithinRange to false.

Editable example

<NumberInput
  defaultValue={15}
  max={30}
  keepWithinRange={false}
  clampValueOnBlur={false}
/>
Copied!

Disable

To disable the component, set disabled to true.

Editable example

<VStack>
  <NumberInput disabled variant="outline" placeholder="outline" />
  <NumberInput disabled variant="filled" placeholder="filled" />
  <NumberInput disabled variant="flushed" placeholder="flushed" />
  <NumberInput disabled variant="unstyled" placeholder="unstyled" />

  <FormControl
    disabled
    label="Order quantity"
    helperMessage="Please enter the quantity you wish to order."
  >
    <NumberInput />
  </FormControl>
</VStack>
Copied!

Make Read-Only

To make the component read-only, set readOnly to true.

Editable example

<VStack>
  <NumberInput readOnly variant="outline" placeholder="outline" />
  <NumberInput readOnly variant="filled" placeholder="filled" />
  <NumberInput readOnly variant="flushed" placeholder="flushed" />
  <NumberInput readOnly variant="unstyled" placeholder="unstyled" />

  <FormControl
    readOnly
    label="Order quantity"
    helperMessage="Please enter the quantity you wish to order."
  >
    <NumberInput />
  </FormControl>
</VStack>
Copied!

Make Input Invalid

To make the input invalid, set invalid to true.

Editable example

<VStack>
  <NumberInput invalid variant="outline" placeholder="outline" />
  <NumberInput invalid variant="filled" placeholder="filled" />
  <NumberInput invalid variant="flushed" placeholder="flushed" />
  <NumberInput invalid variant="unstyled" placeholder="unstyled" />

  <FormControl
    invalid
    label="Order quantity"
    errorMessage="Order quantity is required."
  >
    <NumberInput />
  </FormControl>
</VStack>
Copied!

Customize Stepper

To customize the stepper, set props to incrementProps or decrementProps.

Editable example

<NumberInput
  incrementProps={{ px: "xs", children: "+" }}
  decrementProps={{ px: "xs", children: "-" }}
/>
Copied!

Use Custom Component

To use a custom component, use useNumberInput.

Editable example

const { getInputProps, getIncrementProps, getDecrementProps } = useNumberInput({
  step: 0.01,
  defaultValue: 3.14,
  min: 3,
  max: 4,
  precision: 2,
})

return (
  <HStack maxW="xs" gap="sm">
    <IconButton icon={<PlusIcon fontSize="2xl" />} {...getIncrementProps()} />
    <Input {...getInputProps()} />
    <IconButton icon={<MinusIcon fontSize="2xl" />} {...getDecrementProps()} />
  </HStack>
)
Copied!

Use React Hook Form

Editable example

type Data = { numberInput: string }

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      invalid={!!errors.numberInput}
      label="Age"
      errorMessage={errors.numberInput ? errors.numberInput.message : undefined}
    >
      <Controller
        name="numberInput"
        control={control}
        rules={{
          required: { value: true, message: "This is required." },
          max: { value: 5, message: "The maximum value is 5." },
        }}
        render={({ field }) => <NumberInput {...field} />}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousInputNextPasswordInput