Radio button

Usage

<Radio name="group" value="first" aria-label="First radio" checked defaultChecked={true} />
<Radio name="group" value="second" aria-label="Second radio" />
<Radio name="group" value="third" aria-label="Third radio" />

Labels

<Radio name="animals" value="cat" id="cat-radio" checked defaultChecked={true} />
<label for="cat-radio">Cat</label>

<Radio name="animals" value="second" id="mouse-radio" />
<label for="mouse-radio">Mouse</label>

<Radio name="animals" value="third" id="dog-radio" />
<label for="dog-radio">Dog</label>

Theming

Token	Default value
`--np-radio-icon-size`	`20px`
`--np-radio-icon-color`	`--np-color-on-surface-variant`
`--np-radio-selected-icon-color`	`--np-color-primary`

Example

<Radio
	--np-radio-icon-size="40px"
	--np-radio-icon-color="var(--np-color-secondary)"
	--np-radio-selected-icon-color="var(--np-color-tertiary)"
	checked
	defaultChecked={true}
	name="themed"
/>
<Radio
	--np-radio-icon-size="40px"
	--np-radio-icon-color="var(--np-color-secondary)"
	--np-radio-selected-icon-color="var(--np-color-tertiary)"
	name="themed"
/>
<Radio
	--np-radio-icon-size="40px"
	--np-radio-icon-color="var(--np-color-secondary)"
	--np-radio-selected-icon-color="var(--np-color-tertiary)"
	name="themed"
/>

API

Attribute	Type	Default	Description
`...attributes`	`Omit<HTMLInputAttributes, 'type'>`

Bindables

Attribute	Type	Description
`group`	`string \| number \| undefined`	Input property
`element`	`HTMLElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.