Number input (UI SDK): Min and max

A step button turns off at its bound. A typed value outside the bounds is pulled back in when it’s committed.

Guests

Tables seat 1 to 8 guests.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputMinMax() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="guests">Guests</Label>
      <NumberInput defaultValue={2} min={1} max={8}>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="guests" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">
        Tables seat 1 to 8 guests.
      </p>
    </div>
  )
}

export { UiSdkNumberInputMinMax }

Add this example

This adds the example as components/examples/ui-sdk-number-input/min-max.tsx, together with the Number input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-number-input-min-max.json

To add only the component, follow the Number input installation.

Props in this example

The Number input props this example sets, from the API reference.

NumberInput

Prop	Type	Default
`defaultValue`	`number \| null`	`–`
`min`	`number`	`–`
`max`	`number`	`–`

NumberInputControl

Prop	Type	Default
`id`	`string`	`–`

Every prop is in the Number input API reference.

More Number input examples

See them all, with keyboard support and accessibility notes, on the Number input page.