Custom Checkbox

Accessible, custom checkbox button (CSS only).

How to

The Custom Checkbox component is used to replace the native checkbox button with a custom element (e.g., an icon). A classic example is the "Add to Favorite" button, which often is a heart (or star) icon that can be clicked on to mark an item as favorite.

Assistive technologies will read this component as a standard checkbox button.

Optionally, you can include an inline SVG icon. The color of the icon is automatically updated on click (check the --icon variation).

The component includes some custom properties to simplify the customization process:

:root {
  --custom-checkbox-size: 20px;
  --custom-checkbox-radius: 4px;
  --custom-checkbox-border-width: 1px;
  --custom-checkbox-marker-size: 18px;
}

Categories

• Forms > Form Elements
• Controls

Bug report & feedback

Component Github page ↗