shoelace/docs/components/radio.md

Radio

[component-header:sl-radio]

Radios allow the user to select one option from a group of many.

<sl-radio>Radio</sl-radio>

?> This component doesn't work with standard forms. Use <sl-form> instead.

Examples

Checked

Use the checked attribute to activate the radio.

<sl-radio checked>Checked</sl-radio>

Disabled

Use the disabled attribute to disable the radio.

<sl-radio disabled>Disabled</sl-radio>

Grouping Radios

Radios are grouped based on their name attribute and scoped to the nearest form.

<sl-radio name="option" checked>Option 1</sl-radio><br>
<sl-radio name="option">Option 2</sl-radio><br>
<sl-radio name="option">Option 3</sl-radio><br>
<sl-radio name="option">Option 4</sl-radio>

[component-metadata:sl-radio]