Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.0

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
    isInvalid
    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 isDisabled to true.

Editable example

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

  <FormControl
    isDisabled
    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 isReadOnly to true.

Editable example

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

  <FormControl
    isReadOnly
    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 isInvalid to true.

Editable example

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

  <FormControl
    isInvalid
    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">
    <Button {...getIncrementProps()}>+</Button>
    <Input {...getInputProps()} />
    <Button {...getDecrementProps()}>-</Button>
  </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
      isInvalid={!!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

PreviousNativeSelectNextPhoneInput