---
title: Checkbox
category: Forms
summary: Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have a user indicate that they agree to specific terms and conditions.
---

```jsx live
render(
  <StackView axis="horizontal" spacing={2}>
    <Checkbox name="checkbox" value="peach" label="Peach" />
    <Checkbox name="checkbox" value="watermelon" label="Watermelon" />
    <StackView as="label" axis="horizontal" spacing={0.5}>
      <Checkbox name="checkbox" value="orange" />
      <Text size={4}>Orange</Text>
    </StackView>
  </StackView>
)
```

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