NumberInput
The NumberInput component is designed for numeric input, featuring a label, input field, and optional description. It supports various formatting options and built-in accessibility attributes.
Import
import { NumberInput } from "@cfa/react-core";Live Editor
Guidelines
When to use
- NumberInput is for general numeric entry.
Do
- Always provide a visible label in sentence case. Placeholder text is not a label. Use placeholders only for optional format hints, never as the only label.
- Validate when people leave the field or submit the form, not on every keystroke.
Avoid
- Using NumberInput for cart or checkout line-item quantities. Use CartInput.
Examples
Default
A basic NumberInput with a label.
Sizes
Use the size prop to control height, padding, and typography. Options are sm, md (default), and lg. Pass size="lg" to match the previous default height.
Required
Use the isRequired prop to indicate that the field must have a value.
With Description
Provide additional context with the description prop.
Right Aligned
Right-align the input text by setting the alignment prop to right. This is particularly useful for currency values.
With Placeholder
Use the placeholder prop to show example text when the input is empty.
Formatting Options
The NumberInput supports different formatting options to display values appropriately.
Percentage Format
Display values as percentages using the formatOptions prop.
Currency Format
Display values as currency with proper formatting. You can specify different currencies.
Controlled
Use the value or defaultValue prop to set the number value. The onChange event is called when the user finishes editing the value (e.g. on blur, incrementing, or decrementing).