Number input (UI SDK): Read-only

A read-only field can be focused and submits, but steps, scrubs and typing don’t change it.

Seats included

Set by your plan.

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

function UiSdkNumberInputReadOnly() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="included-seats">Seats included</Label>
      <NumberInput defaultValue={5} readOnly>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="included-seats" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">Set by your plan.</p>
    </div>
  )
}

export { UiSdkNumberInputReadOnly }

Add this example

This adds the example as components/examples/ui-sdk-number-input/read-only.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-read-only.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`	`–`
`readOnly`	`boolean`	`false`

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.