Radio

Material Design 3 radio button web component (grouped selection, error, and form participation).

Example

npm install @lit-material/radio @lit-material/tokens

import "@lit-material/radio";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

Material Design 3 radio button.

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`
`error`	`error`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`name`	`name`	`string`	`""`
`value`	`value`	`string`	`"on"`
`form`	`form`	`string \| undefined`	none
`ariaLabel`	`aria-label`	`string \| null`	`null`	Forwarded to the inner control; radios have no visible label so this is often required.
`ariaLabelledBy`	`aria-labelledby`	`string \| null`	`null`

Event	Description
`change`	Bubbles when this radio becomes checked via user interaction.

Part	Description
`radio`	The container the state layer, focus ring, and ring/dot are rendered in.
`icon`	The svg containing the outer ring and, when checked, the inner dot.
`ripple`	The state-layer element the hover/press feedback is drawn on.
`focus-ring`	The focus indicator element.