2020-07-15 21:30:37 +00:00
# Radio
[component-header:sl-radio]
Radios allow the user to select one option from a group of many.
2021-04-09 12:15:33 +00:00
Radios are designed to be used with [radio groups ](/components/radio-group ). As such, all of the examples on this page utilize them to demonstrate their correct usage.
2020-07-15 21:30:37 +00:00
```html preview
2021-11-04 22:12:47 +00:00
< sl-radio-group label = "Select an option" >
2021-04-09 12:15:33 +00:00
< sl-radio value = "1" checked > Option 1< / sl-radio >
< sl-radio value = "2" > Option 2< / sl-radio >
< sl-radio value = "3" > Option 3< / sl-radio >
< / sl-radio-group >
2020-07-15 21:30:37 +00:00
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
2022-03-02 15:10:41 +00:00
< SlRadio value = "1" checked >
Option 1
< / SlRadio >
2021-11-04 22:12:47 +00:00
< SlRadio value = "2" > Option 2< / SlRadio >
< SlRadio value = "3" > Option 3< / SlRadio >
< / SlRadioGroup >
);
```
2022-01-11 14:18:20 +00:00
?> This component works with standard `<form>` elements. Please refer to the section on [form controls ](/getting-started/form-controls ) to learn more about form submission and client-side validation.
2020-07-15 21:30:37 +00:00
## Examples
### Disabled
2021-04-09 12:15:33 +00:00
Use the `disabled` attribute to disable a radio.
2020-07-15 21:30:37 +00:00
```html preview
2021-11-04 22:12:47 +00:00
< sl-radio-group label = "Select an option" >
2021-04-09 12:15:33 +00:00
< sl-radio value = "1" checked > Option 1< / sl-radio >
< sl-radio value = "2" > Option 2< / sl-radio >
< sl-radio value = "3" > Option 3< / sl-radio >
< sl-radio value = "4" disabled > Disabled< / sl-radio >
< / sl-radio-group >
2020-07-15 21:30:37 +00:00
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
2022-03-02 15:10:41 +00:00
< SlRadio value = "1" checked >
Option 1
< / SlRadio >
2021-11-04 22:12:47 +00:00
< SlRadio value = "2" > Option 2< / SlRadio >
< SlRadio value = "3" > Option 3< / SlRadio >
2022-03-02 15:10:41 +00:00
< SlRadio value = "4" disabled >
Disabled
< / SlRadio >
2021-11-04 22:12:47 +00:00
< / SlRadioGroup >
);
```
2020-07-15 21:30:37 +00:00
[component-metadata:sl-radio]