[Checkbox] Implement Checkbox with new API

[michaldudak]

This is the place to gather ideas, measure interest and discuss the API and implementation details of the checkbox component and hook.

See #10 for the umbrella issue to track progress on Base UI and mui/material-ui#6218 for the problem this project solve.

[DiegoAndai]

Whenever we tackle this issue, we should keep in mind this Material UI issue about indeterminate/mixed state: mui/material-ui#20476

[colmtuite]

Anatomy

// JSX
<Checkbox>
	<Checkbox.Indicator />
</Checkbox>

// Rendered HTML
<button type="button" role="checkbox" aria-checked="false" value="off" data-state="unchecked">
	<span data-state="unchecked" />
</button>
<input type="checkbox" aria-hidden="true" tabindex="-1" style="hide visually" />

Components

Root

Rendered element: button

prop	type	default	description
required	boolean	false
disabled	boolean	false
autoFocus	boolean	false
readOnly	boolean	false
name	string
checked	boolean
defaultChecked	boolean
onChange	(event: ChangeEvent) ⇒ void
render	(props, state) ⇒ ReactElement
className

Indicator

Rendered element: span

Design Notes

• [data-state] [data-readonly] and [data-disabled] should go on both component parts, when applicable.