Number Input

A form component to input numerical values, with increment and decrement controls. 

Disabled

Use the disabled attr or the disabled class to disable a component.

Valid

Use the data-valid attr or the valid class to indicate an valid state.

Invalid

Use the data-invalid attr or the invalid class to indicate an invalid state.

Controlled

Use the value and onValueChange props when you need to control the value externally.

Uncontrolled

Use the name prop to include the value in the form submission.

Sizes

Use the number-input-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind 

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtle.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

:root {
  --ex-number-input-font-family: var(--font-sans);
  --ex-number-input-font-weight: var(--font-weight-normal);
 
  --ex-number-input-font-size-sm: var(--text-xs);
  --ex-number-input-font-size-md: var(--text-sm);
  --ex-number-input-font-size-lg: var(--text-base);
 
  --ex-number-input-height-sm: calc(var(--spacing) * 9);
  --ex-number-input-height-md: calc(var(--spacing) * 10);
  --ex-number-input-height-lg: calc(var(--spacing) * 12);
 
  --ex-number-input-px-sm: calc(var(--spacing) * 3.5);
  --ex-number-input-px-md: calc(var(--spacing) * 4);
  --ex-number-input-px-lg: calc(var(--spacing) * 5);
 
  --ex-number-input-radius-sm: var(--radius-sm);
  --ex-number-input-radius-md: var(--radius-sm);
  --ex-number-input-radius-lg: var(--radius-sm);
 
  --ex-number-input-control-width-sm:  calc(var(--spacing) * 4));
  --ex-number-input-control-width-md:  calc(var(--spacing) * 5));
  --ex-number-input-control-width-lg:  calc(var(--spacing) * 6));
}

API

Number Input

Number Input Field

Number Input Increment Button

Number Input Decrement Button