NumberField

Installation#

npmpnpmyarnbun

npx sugarcoat add number-field

Examples#

Default#

Default

Controlled#

Use value and onValueChange for controlled state.

Controlled

Sizes#

Available in multiple sizes.

Sizes

Min and Max#

Min/Max

Step#

Step

With Label#

With Label

With Scrub Area#

Drag horizontally on the label to adjust the value.

Scrub Area

Price Input#

Price Input

Quantity Selector#

Quantity Selector

Disabled#

Disabled

Read Only#

Read Only

Anatomy#

<NumberField defaultValue={0}>
  <NumberField.ScrubArea>
    <label>Label</label>
  </NumberField.ScrubArea>
  <NumberField.Group>
    <NumberField.Decrement />
    <NumberField.Input />
    <NumberField.Increment />
  </NumberField.Group>
</NumberField>

Usage#

Import

import { NumberField } from "@sugarcoat/ui-nxt";

Usage

<NumberField 
value={value} 
onValueChange={setValue}
min={0}
max={100}
>
<NumberField.Group>
  <NumberField.Decrement />
  <NumberField.Input />
  <NumberField.Increment />
</NumberField.Group>
</NumberField>

Props#

NumberField (Root)#

Prop	Type	Default	Description
value	number	-	Controlled value
defaultValue	number	-	Default value (uncontrolled)
onValueChange	(value: number) => void	-	Callback when value changes
min	number	-	Minimum allowed value
max	number	-	Maximum allowed value
step	number	1	Step increment for buttons and keyboard
largeStep	number	10	Step used with Page Up/Down keys
size	"sm" \| "md" \| "lg"	"md"	Size variant
color	"default" \| "primary"	"default"	Color variant
disabled	boolean	false	Whether the field is disabled
readOnly	boolean	false	Whether the field is read-only
required	boolean	false	Whether the field is required
format	Intl.NumberFormatOptions	-	Number formatting options
css	SystemStyleObject	-	Additional CSS styles using Panda CSS syntax

Accessibility#

Built on Base UI NumberField for robust accessibility
Full keyboard support:
- Arrow Up/Down to increment/decrement by step
- Page Up/Down to increment/decrement by large step
- Home/End to go to min/max values
Buttons have proper aria-label attributes
Input has role="spinbutton" with proper ARIA attributes
Disabled and read-only states properly communicated