Number input (UI SDK): Step

step is the usual increment. Shift, Page Up and Page Down move by largeStep, and Alt or Option with an arrow key by smallStep. Hold a button to repeat.

Temperature

Max tokens

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

function UiSdkNumberInputStep() {
  return (
    <div className="grid w-full max-w-sm grid-cols-2 gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="temperature">Temperature</Label>
        <NumberInput
          defaultValue={0.7}
          min={0}
          max={2}
          step={0.1}
          largeStep={0.5}
          smallStep={0.01}
        >
          <NumberInputGroup>
            <NumberInputDecrement />
            <NumberInputControl id="temperature" />
            <NumberInputIncrement />
          </NumberInputGroup>
        </NumberInput>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="max-tokens">Max tokens</Label>
        <NumberInput
          defaultValue={4096}
          min={256}
          max={32768}
          step={256}
          largeStep={4096}
        >
          <NumberInputGroup>
            <NumberInputDecrement />
            <NumberInputControl id="max-tokens" />
            <NumberInputIncrement />
          </NumberInputGroup>
        </NumberInput>
      </div>
    </div>
  )
}

export { UiSdkNumberInputStep }

Add this example

This adds the example as components/examples/ui-sdk-number-input/step.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-step.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`	`–`
`step`	`number`	`1`
`largeStep`	`number`	`step × 10`
`smallStep`	`number`	`step ÷ 10`

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.