NumberInput
NumberInput
is a component used to obtain numeric input from the user.
Import
import { NumberInput } from "@yamada-ui/react"
Usage
Editable example
<NumberInput placeholder="basic" />
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>
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>
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>
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>
Set Default Value
To set a default value, set a string or number to defaultValue
.
Editable example
<NumberInput defaultValue={18} />
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} />
Set Step Value
To set a step value, set a number to step
.
Editable example
<NumberInput defaultValue={15} step={5} min={5} max={30} />
Set Decimal Points
To set decimal points, set a number to precision
.
Editable example
<NumberInput defaultValue={15} precision={2} step={0.2} />
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} />
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} />
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>
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>
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>
Customize Stepper
To customize the stepper, set props
to incrementProps
or decrementProps
.
Editable example
<NumberInput incrementProps={{ px: "xs", children: "+" }} decrementProps={{ px: "xs", children: "-" }} />
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> )
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> )
Edit this page on GitHub