CheckboxCard

Basic usage

CheckboxCard is a combination of <Card> and <Checkbox>

<CheckboxCard label="Blueberries">
  Blueberries udon noodles crispy iceberg lettuce picnic soy milk green tea
  scotch bonnet pepper tahini drizzle
</CheckboxCard>

Controlled state

You can bind to a boolean state using the checked prop and update your state every time the onChange event is triggered.

<CheckboxCard checked={selected} onChange={() => setSelected(!selected)}>

Radio buttons

By default, type will be checkbox. If you want radio button, pass type='radio' to the component.

Use the same name to connect multiple radio cards (so only one of them can be selected).

<CheckboxCard name="radioDemo" type="radio">

Switch toggle

<CheckboxCard type="switch">

Custom label content

The label prop also accepts JSX content, which can be useful if you want an icon next to your header:

Header content

If you want to display content above your <CheckboxCard>, you can use header prop. You are responsible for the layout, but the component will ensure that your content is clickable and acts as a part of the component

<CheckboxCard
  label="Cilantro"
  header={<img src="/seal.jpg" alt="Grumpy-looking seal" />}
>
  ...
</CheckboxCard>

Align left

Optional placement for the checkbox, radio, or switch icon with align="left".

<CheckboxCard align="left">

Alert state

You can set the state prop to alert to give feedback to the user that something is wrong with the selection.

<CheckboxCard state="alert">

Inactive state

Use state="inactive" instead of disabled when the user needs to know the card exists but cannot be toggled — and why. The card chrome and label stay fully visible; only the toggle icon is dimmed. The control stays focusable and screen-readable (announced via aria-disabled), and can be wrapped in a <Tooltip> to explain the reason.

This matches the pattern from <Button state="inactive">.

<CheckboxCard state="inactive">

Combine controlled state with <Tooltip> to keep the value frozen and explain why the card is inactive:

Disabled

CheckboxCard can be disabled, by passing disabled prop.

<CheckboxCard disabled>

If you're using header and disabled prop together, it will get reduced opacity.

<CheckboxCard
  label="Seal"
  disabled
  header={<img src="/seal.jpg" alt="Grumpy-looking seal" />}
>
  ...
</CheckboxCard>