Radio

Custom icons

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

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

We recommend fa-solid fa-circle-dot when checked, and fa-regular fa-circle for the unchecked state.

Group multiple radio buttons together by applying the same name to them. Use the checked attribute to pre-select an option.

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 radio exists but cannot be toggled — and why. 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.

Disabled