Checkbox

Custom icons

Since it's practically impossible to style the native browser checkbox element, we have opted to replace it with custom icons instead.

The .bf-checkbox-unchecked icon will be hidden as long as the checkbox is :checked (and vice versa for .bf-checkbox-checked).

We recommend fa-solid fa-square-check when checked, and fa-regular fa-square for the unchecked state.

Button styling

Small button size

Hidden label

• Apply .bf-checkbox-hidelabel on the wrapper
• Omit the text inside <label>
• Apply an aria-label to the <input> for accessibility

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 control exists but cannot be toggled — and why. The icon is dimmed while the control stays focusable and screen-readable. Also covers the switch and card variants via the same class.

Set aria-disabled="true" on the <input> so assistive tech announces it as disabled. The class is styling only; to actually block toggling, the consumer must prevent the underlying <input> from changing state (e.g. controlled React state, or a change listener that calls event.preventDefault() and restores the previous value).

Disabled