[number field] Implement NumberField with new API #185
Description
Summary
Replaces the NumberInput component.
This is the place to gather ideas, measure interest and discuss the API and implementation details of the NumberField component and hook.
Anatomy
<NumberField>
<NumberField.Group>
<NumberField.Input />
<NumberField.Decrement />
<NumberField.Increment />
<NumberField.Scrubber />
</NumberField.Group>
</NumberField>Root
Rendered element: div
| prop | type | default | description |
|---|---|---|---|
| defaultValue | number | ||
| id | |||
| min | number | ||
| max | number | ||
| step | number | 1 | |
| largeStep | number | 10 | |
| required | boolean | ||
| disabled | boolean | ||
| invalid | boolean | ||
| autoFocus | boolean | ||
| children | |||
| readOnly | boolean | ||
| name | string | ||
| value | number | ||
| onChange | function | ||
| format | Intl.NumberFormatOptions |
Other props (unnamed):
- Ability to scrub the input with the
wheel - Locale for
format
Group
Rendered element: div
All div attrs.
Input
Rendered element: <input type="text" />
All input attrs.
Decrement
Rendered element: button
All button attrs.
Increment
Rendered element: button
All button attrs.
Scrubber
Rendered element: span
All span attrs.
Benchmarks
- https://react-spectrum.adobe.com/react-aria/NumberField.html
- https://chakra-ui.com/docs/components/number-input
Examples
No response
Motivation
No response
Search keywords: number field, number input
Metadata
Metadata
Assignees
Labels
Projects
Status