Number Input

The NumberInput component captures numeric values with optional min, max, step, and increment controls.

Usage & Examples

Seats

seats.tsx
<NumberInput
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes
<NumberInput theme="primary"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput theme="secondary"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput theme="tertiary"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput theme="quaternary"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />

// States
<NumberInput state="success"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput state="warning"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput state="error"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput state="info"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />

// Sizes
<NumberInput size="xs"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput size="small"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput size="medium"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput size="large"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />

// Variants
<NumberInput variant="solid"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput variant="outline"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput variant="glass"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />

// Rounding
<NumberInput rounding="none"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput rounding="medium"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput rounding="large"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />

// Shadows
<NumberInput shadow="none"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput shadow="light"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />
<NumberInput shadow="strong"
    label="Seats"
    defaultValue={12}
    min={1}
    max={50}
    step={1}
  />

Props API

34 props
Columns
Number Input props API
Default
Description
clampOnBlurbooleanNopropstrueWhether to clamp values to min/max on blur and when using stepper buttons.
classNamestringNostyling—Additional class name for the component root.
containerClassNamestringNoprops—Additional class name for the outer label/input container.
controlsClassNamestringNoprops—Additional class name for the stepper controls wrapper.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
decrementAriaLabelstringNoprops"Decrease value"Accessible label for the decrement control.
decrementButtonClassNamestringNoprops—Additional class name for the decrement button.
defaultValuenumber | ""Noprops""Initial numeric value for uncontrolled usage.
errorMessageReactNodeNoprops—-
helperTextReactNodeNoprops—-
incrementAriaLabelstringNoprops"Increase value"Accessible label for the increment control.
incrementButtonClassNamestringNoprops—Additional class name for the increment button.