[NumberField] Implement NumberField with new API

[atomiks]

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

[oliviertassinari]

Benchmarks

The benchmark list we maintain on Notion: https://www.notion.so/mui-org/core-Input-Number-component-364825a7bec94381809ac11ff05b4cc0 for this one.