Skip to Content
ComponentsNumberInput

NumberInput

A numeric input with increment/decrement controls. Built on Ark UI .

Import

import { NumberInput } from '@grannyshot/ui'

Usage

<NumberInput label="Quantity" defaultValue="1" min={0} max={99} />

Sizes

<NumberInput size="sm" defaultValue="0" /> <NumberInput size="md" defaultValue="0" /> <NumberInput size="lg" defaultValue="0" />

Min / Max / Step

<NumberInput defaultValue="50" min={0} max={100} step={10} />

API Reference

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Input size
labelstringLabel text
defaultValuestringDefault value
valuestringControlled value
minnumberMinimum value
maxnumberMaximum value
stepnumber1Step increment
disabledbooleanfalseDisabled state
classNamestringAdditional CSS classes
Last updated on