Number Field

Docs

Number Field

A number input that allow users to input custom number entries with a keyboard.

Installation

npx shadcn-solid@latest add number-field

Usage

import {
  NumberField,
  NumberFieldDecrementTrigger,
  NumberFieldDescription,
  NumberFieldGroup,
  NumberFieldIncrementTrigger,
  NumberFieldInput,
  NumberFieldLabel
} from "@components/ui/number-field";

<NumberField>
    <NumberFieldGroup>
        <NumberFieldDecrementTrigger aria-label="Decrement" />
        <NumberFieldInput />
        <NumberFieldIncrementTrigger aria-label="Increment" />
    </NumberFieldGroup>
</NumberField>

Example

Disabled

With Error

Navigation Menu OTP Field