---
meta:
title: Radio Button
description: Radios buttons allow the user to select a single option from a group using a button-like control.
layout: component
---
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
Option 1
Option 2
Option 3
```
```jsx:react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
);
```
## Examples
### Checked States
To set the initial value and checked state, use the `value` attribute on the containing radio group.
```html:preview
Option 1
Option 2
Option 3
```
```jsx:react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
);
```
### Disabled
Use the `disabled` attribute to disable a radio button.
```html:preview
Option 1
Option 2
Option 3
```
```jsx:react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
);
```
### Sizes
Use the `size` attribute to change a radio button's size.
```html:preview
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
```
```jsx:react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
);
```
### Pill Buttons
Use the `pill` attribute to give radio buttons rounded edges.
```html:preview
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
```
```jsx:react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
);
```
### Prefix and Suffix Icons
Use the `prefix` and `suffix` slots to add icons.
```html:preview
Option 1
Option 2
Option 3
```
```jsx:react
import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
);
```
### 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
```
```jsx:react
import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```