Checkbox

View Source

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.

Peach

Watermelon

Orange

Copy

Edit

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>
)

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>
)

Apple

Banana

Kiwi

Copy

Edit

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>
)

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>
)

Props

disabledboolean

Disables the checkbox component.

labelstring | null

Used to label the checkbox. Checkbox must have parent label if left undefined. Pass null to use as a graphical element only, please note you need to provide additional aria attributes when doing so.

indeterminateboolean

If true, puts the checkbox in an indeterminate state.

checkedboolean

Checks the checkbox, will be overriden if indeterminate is true.

namestring

Maps to the internal input’s name prop.

valuemixed

Maps to the internal input’s value prop.

size'xs' | 'sm' | 'md' | 'lg' | 'xl'

Determines the size of the checkbox based on a scale.

onChange() => null

Maps to the internal input’s onChange prop.

onFocus() => null

Maps to the internal input’s onFocus prop.

onBlur() => null

Maps to the internal input’s onBlur prop.

Props

PreviousTooltip NextCheckboxCard