Number Field

1
2
3import { useState, type ReactNode } from 'react';

import { NumberField, NumberFieldInput } from '@/registry/bases/base-ui/components/data-entry/number-field';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/number-field.json

Usage#

import { NumberField, NumberFieldInput } from '@/components/data-entry/number-field';

<NumberField value={width} onValueChange={setWidth} min={0} max={1000} step={1}>
  <NumberFieldInput />
</NumberField>

The consumer composes a NumberFieldInput and any InputGroupAddon / InputGroupText around it, such as a leading label or a trailing unit. Use it for a compact numeric field in a property inspector, such as a width or a corner radius; the arithmetic parsing lets a reader type 100 + 8 and commit 108.

Composition#

NumberField
`-- NumberFieldInput

Mixed values#

1
2
3import { useState, type ReactNode } from 'react';

import { NumberField, NumberFieldInput } from '@/registry/bases/base-ui/components/data-entry/number-field';

Set mixed when the selection holds differing values: the field blanks to its placeholder until the reader types one, and the consumer's own onValueChange applies it to every selected target.

API reference#

NumberField#

Renders shadcn's InputGroup and takes every prop it takes except onChange and defaultValue, plus:

Parses the draft with parseRaw, or as arithmetic by default, and clamps the result to min and max; step moves the value on the arrow keys, clamped the same way. Escape drops the draft and commits nothing. displayText shows a label (such as "Hug" or "Fill") in place of the number until the field is focused. The root carries data-mixed while mixed, data-editing while the input holds a draft, and data-disabled while disabled. It sets data-slot="number-field", and its focus ring reads NumberFieldInput's own slot in place of upstream's input-group-control.

NumberFieldInput#

Renders shadcn's InputGroupInput and takes every prop it takes except value, defaultValue, type and disabled.

Shows the field's value, or its draft while focused; its placeholder shows only while the field is mixed. It sets data-slot="number-field-input" in place of upstream's input-group-control, which the root's focus ring reads (the invalid ring reads any data-slot, so it still applies unchanged).