Yami

Search documentation

Search components and pages

Number Input

A numeric input with increment and decrement buttons.

Installation

Add the number input component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/number-input.json

Usage

import { NumberInput } from "@/components/ui/number-input"

<NumberInput defaultValue={42} min={0} max={100} />

Examples

Default

Code

import { NumberInput } from "@/components/ui/number-input"

<NumberInput defaultValue={42} min={0} max={100} />

With step

Increments by 5

Code

import { NumberInput } from "@/components/ui/number-input"

<NumberInput defaultValue={50} min={0} max={200} step={5} />

Formatted value

Append a unit suffix

Code

import { NumberInput } from "@/components/ui/number-input"

<NumberInput
  defaultValue={16}
  min={8}
  max={72}
  formatValue={(v) => `${v}px`}
/>

Disabled

Code

import { NumberInput } from "@/components/ui/number-input"

<NumberInput defaultValue={10} disabled />