CheckboxCard

Checkbox card is a clickable card that toggles the hidden checkbox input (or radio button) contained inside.

Basic checkbox card

Switch toggle

Add .bf-switch-wrapper to the <label> and replace the checkbox icons with switch toggle elements:

Radio button

Alert state

Use .bf-checkbox-alert on the wrapper to apply alert state styling.

Inactive state

Use .bf-checkbox-inactive on the wrapper 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 (and card border) are dimmed. See the checkbox docs for the full caveat: the class is styling + aria-disabled only — consumer must prevent the underlying <input> from actually changing state.

Header content

Seal is grumpy Plsease mark this as checked if you feel like the seal is gumpy-looking.

Edit code