2022-03-15 21:42:59 +00:00
# Radio Button
[component-header:sl-radio-button]
Radios buttons allow the user to select a single option from a group using a button-like control.
Radio buttons are designed to be used with [radio groups ](/components/radio-group ). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
```html preview
< sl-radio-group label = "Select an option" >
< sl-radio-button name = "a" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button name = "a" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button name = "a" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
```
```jsx react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton name = "option" value = "1" checked >
Option 1
< / SlRadioButton >
< SlRadioButton name = "option" value = "2" >
Option 2
< / SlRadioButton >
< SlRadioButton name = "option" value = "3" >
Option 3
< / SlRadioButton >
< / SlRadioGroup >
);
```
## Examples
### Checked
To set the initial checked state, use the `checked` attribute.
```html preview
< sl-radio-group label = "Select an option" >
< sl-radio-button name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
```
```jsx react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton name = "option" value = "1" checked >
Option 1
< / SlRadioButton >
< SlRadioButton name = "option" value = "2" >
Option 2
< / SlRadioButton >
< SlRadioButton name = "option" value = "3" >
Option 3
< / SlRadioButton >
< / SlRadioGroup >
);
```
### Disabled
Use the `disabled` attribute to disable a radio button.
```html preview
< sl-radio-group label = "Select an option" >
< sl-radio-button name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button name = "option" value = "3" disabled > Option 3< / sl-radio-button >
< / sl-radio-group >
```
```jsx react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton name = "option" value = "1" checked >
Option 1
< / SlRadioButton >
< SlRadioButton name = "option" value = "2" >
Option 2
< / SlRadioButton >
< SlRadioButton name = "option" value = "3" disabled >
Option 3
< / SlRadioButton >
< / SlRadioGroup >
);
```
### Variants
Use the `variant` attribute to set the button's variant.
```html preview
< sl-radio-group label = "Select an option" >
< sl-radio-button variant = "default" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button variant = "default" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button variant = "default" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button variant = "primary" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button variant = "primary" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button variant = "primary" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button variant = "success" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button variant = "success" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button variant = "success" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button variant = "neutral" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button variant = "neutral" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button variant = "neutral" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button variant = "warning" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button variant = "warning" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button variant = "warning" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button variant = "success" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button variant = "success" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button variant = "success" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
```
```jsx react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton variant = "default" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton variant = "default" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton variant = "default" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton variant = "primary" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton variant = "primary" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton variant = "primary" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton variant = "success" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton variant = "success" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton variant = "success" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton variant = "neutral" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton variant = "neutral" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton variant = "neutral" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton variant = "warning" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton variant = "warning" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton variant = "warning" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton variant = "success" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton variant = "success" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton variant = "success" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
);
```
### Sizes
Use the `size` attribute to change a radio button's size.
```html preview
< sl-radio-group label = "Select an option" >
< sl-radio-button size = "small" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button size = "small" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button size = "small" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button size = "medium" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button size = "medium" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button size = "medium" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button size = "large" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button size = "large" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button size = "large" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
```
```jsx react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton size = "small" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton size = "small" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton size = "small" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton size = "medium" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton size = "medium" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton size = "medium" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton size = "large" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton size = "large" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton size = "large" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
);
```
### Pill Buttons
Use the `pill` attribute to give radio buttons rounded edges.
```html preview
< sl-radio-group label = "Select an option" >
< sl-radio-button pill size = "small" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button pill size = "small" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button pill size = "small" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button pill size = "medium" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button pill size = "medium" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button pill size = "medium" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
< br / >
< sl-radio-group label = "Select an option" >
< sl-radio-button pill size = "large" name = "option" value = "1" checked > Option 1< / sl-radio-button >
< sl-radio-button pill size = "large" name = "option" value = "2" > Option 2< / sl-radio-button >
< sl-radio-button pill size = "large" name = "option" value = "3" > Option 3< / sl-radio-button >
< / sl-radio-group >
```
```jsx react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton pill size = "small" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton pill size = "small" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton pill size = "small" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton pill size = "medium" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton pill size = "medium" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton pill size = "medium" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
< br / >
< SlRadioGroup label = "Select an option" >
< SlRadioButton pill size = "large" name = "option" value = "1" checked > Option 1< / SlRadioButton >
< SlRadioButton pill size = "large" name = "option" value = "2" > Option 2< / SlRadioButton >
< SlRadioButton pill size = "large" name = "option" value = "3" > Option 3< / SlRadioButton >
< / SlRadioGroup >
);
```
### Prefix and Suffix Icons
Use the `prefix` and `suffix` slots to add icons.
```html preview
< sl-radio-group label = "Select an option" >
< sl-radio-button name = "a" value = "1" checked >
< sl-icon slot = "prefix" name = "archive" > < / sl-icon >
Option 1
< / sl-radio-button >
< sl-radio-button name = "a" value = "2" >
< sl-icon slot = "suffix" name = "bag" > < / sl-icon >
Option 2
< / sl-radio-button >
< sl-radio-button name = "a" value = "3" >
< sl-icon slot = "prefix" name = "gift" > < / sl-icon >
< sl-icon slot = "suffix" name = "cart" > < / sl-icon >
Option 3
< / sl-radio-button >
< / sl-radio-group >
```
```jsx react
import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton name = "a" value = "1" checked >
< SlIcon slot = "prefix" name = "archive" / >
Option 1
< / SlRadioButton >
< SlRadioButton name = "a" value = "2" >
< SlIcon slot = "suffix" name = "bag" / >
Option 2
< / SlRadioButton >
< SlRadioButton name = "a" value = "3" >
< SlIcon slot = "prefix" name = "gift" / >
< SlIcon slot = "suffix" name = "cart" / >
Option 3
< / SlRadioButton >
< / SlRadioGroup >
);
```
### Buttons with Icons
You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
```html preview
< sl-radio-group label = "Select an option" >
2022-03-16 21:44:40 +00:00
< sl-radio-button name = "a" value = "angry" >
< sl-icon name = "emoji-angry" label = "Angry" > < / sl-icon >
< / sl-radio-button >
< sl-radio-button name = "a" value = "sad" >
2022-03-15 21:42:59 +00:00
< sl-icon name = "emoji-frown" label = "Sad" > < / sl-icon >
< / sl-radio-button >
2022-03-16 21:44:40 +00:00
< sl-radio-button name = "a" value = "neutral" checked >
2022-03-15 21:42:59 +00:00
< sl-icon name = "emoji-neutral" label = "Neutral" > < / sl-icon >
< / sl-radio-button >
2022-03-16 21:44:40 +00:00
< sl-radio-button name = "a" value = "happy" >
2022-03-15 21:42:59 +00:00
< sl-icon name = "emoji-smile" label = "Happy" > < / sl-icon >
< / sl-radio-button >
2022-03-16 21:44:40 +00:00
< sl-radio-button name = "a" value = "laughing" >
< sl-icon name = "emoji-laughing" label = "Laughing" > < / sl-icon >
< / sl-radio-button >
2022-03-15 21:42:59 +00:00
< / sl-radio-group >
```
2022-03-16 21:44:40 +00:00
```jsx react
import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< SlRadioGroup label = "Select an option" >
< SlRadioButton name = "a" value = "angry" >
< SlIcon name = "emoji-angry" label = "Angry" / >
< / SlRadioButton >
< SlRadioButton name = "a" value = "sad" >
< SlIcon name = "emoji-frown" label = "Sad" / >
< / SlRadioButton >
< SlRadioButton name = "a" value = "neutral" checked >
< SlIcon name = "emoji-neutral" label = "Neutral" / >
< / SlRadioButton >
< SlRadioButton name = "a" value = "happy" >
< SlIcon name = "emoji-smile" label = "Happy" / >
< / SlRadioButton >
< SlRadioButton name = "a" value = "laughing" >
< SlIcon name = "emoji-laughing" label = "Laughing" / >
< / SlRadioButton >
< / SlRadioGroup >
);
```
2022-03-15 21:42:59 +00:00
[component-metadata:sl-radio-button]