Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt

Use this file to discover all available pages before exploring further.

The NumberField component provides a specialized input for numeric values with built-in increment/decrement controls and mouse scrubbing.

​
Installation

import {
  NumberFieldRoot,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldIncrement,
  NumberFieldDecrement,
  NumberFieldScrubArea,
  NumberFieldScrubAreaCursor,
} from "@craftdotui/baseui/components/number-field";

​
Usage

<NumberFieldRoot>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>

​
Components

​
NumberFieldRoot

​
value
number
Controlled value.
​
defaultValue
number
Default value.
​
onValueChange
function
Callback when value changes.
​
min
number
Minimum value.
​
max
number
Maximum value.
​
step
number
default:"1"
Step increment.
​
disabled
boolean
Disable the field.

​
NumberFieldInput

​
size
string
default:"md"
Size variant. Options: xs, sm, md, lg, xl
​
variant
string
default:"default"
Visual variant.

​
NumberFieldIncrement

Button to increment the value.

​
NumberFieldDecrement

Button to decrement the value.

​
NumberFieldScrubArea

Interactive area for mouse scrubbing to change values.

​
NumberFieldScrubAreaCursor

Cursor icon shown during scrubbing.

​
Examples

​
Basic Number Field

<NumberFieldRoot defaultValue={5}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>

​
With Range and Step

<NumberFieldRoot min={0} max={100} step={5} defaultValue={50}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>

​
With Scrub Area

<NumberFieldRoot>
  <NumberFieldScrubArea>
    <NumberFieldScrubAreaCursor />
    Value:
  </NumberFieldScrubArea>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>

​
Controlled

const [value, setValue] = useState(10);

<NumberFieldRoot value={value} onValueChange={setValue}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberFieldRoot>

​
Accessibility

  • Built on @base-ui/react for ARIA support
  • Keyboard navigation (Arrow Up/Down, Page Up/Down)
  • Screen reader announcements
  • Increment/decrement buttons are keyboard accessible
  • Proper min/max constraints