Designing a Plume Checkbox

A Plume Checkbox is a theme-able <input type="checkbox"/> replacement. It can render as “checked”, “unchecked”, and “indeterminate”.

Checkbox Anatomy

Checkbox Variants

Some variants that your Checkbox component built in Plasmic should include are:

isSelectedShows checkbox in selected stateRequired
isIndeterminateShows checkbox in indeterminate stateOptional
isDisabledShows checkbox in disabled stateRecommended
hasLabelShows a label for the checkboxRecommended

In addition, you should consider styling the following interaction variants:

Interaction VariantDescriptionRequired?
Focus Visible WithinControl is focused via keyboard tabbingRecommended
Focused WithinControl is focusedOptional
HoverControl is hoveredOptional

Checkbox elements

Some elements that should be in your Checkbox component are:

rootThe root elementRequired

Checkbox slots

Some slots that your Checkbox component should have are:

labelLabel for this checkboxRequired