Checkbox Card

A stylized checkbox that allows you to add additional information or design elements to checkboxes.

If you’re looking for CheckboxGroup, you can find it here.

Usage

import { CheckboxCard } from "#/ui/components/CheckboxCard"

<CheckboxCard>Checkbox</CheckboxCard>

As you build more complex components sometimes a simple checkbox doesn’t quite solve the needs of your design. The CheckboxCard component allows you to add additional information or design elements to checkboxes.

Content

The CheckboxCard component accepts any content as its children. This allows you to add additional information or design elements to checkboxes.

Make sure you pass a unique id to the CheckboxCard component that’s associated with a label element. This will ensure that the checkbox is accessible.

Alternatively, you can just pass a string to your CheckboxCard component (in which case, an id will be generated for you).

DefaultChecked

If you’d like to pre-select the checkbox, you can pass the defaultChecked prop.

Controlled

By default, the CheckboxCard manages its own state. You can control the state of the CheckboxCard from outside of the component by passing the checked and onChange props.

Show Checkbox

If you’d like, you can show the checkbox itself by passing the showCheckbox prop to the CheckboxCard component.

This tends to work better on larger cards

Additional Checkbox controls

For the sake of simplicity, you do lose out on some checkbox functionality when you use the checkbox card, however. If you’re missing some controls it’s recommended that you extend the CheckboxCard component, or create your own card components using the Checkbox.

Customisation

Classes

All custom classes will be passed down to the CheckboxCard, so you can style it however you want.