---
title: Radio
category: Forms
summary: Use radios to present a list of options where users can only make a single selection.
---

```jsx live
render(
  <StackView axis="horizontal" spacing={3}>
    <Radio name="radio" value="peach" label="Peach" />
    <Radio name="radio" value="watermelon" label="Watermelon" />
    <Radio name="radio" value="orange" label="Orange" />
  </StackView>
)
```

```jsx live
render(
  <ThemeProvider
    theme={{
      radio: {
        fill: 'lightpink',
        stroke: 'hotpink',
        focusStroke: 'hotpink',
        checkedFill: 'hotpink',
        checkedStroke: 'hotpink',
      },
    }}
  >
    <StackView axis="horizontal" spacing={3}>
      <Radio name="theme-radio" value="apple" label="Apple" />
      <Radio name="theme-radio" value="banana" label="Banana" />
      <Radio name="theme-radio" value="kiwi" label="Kiwi" />
    </StackView>
  </ThemeProvider>
)
```