Checkbox allows a user to select one or many options. There are multiple design variations available to be used based on application needs.



Checkboxes are used in scenarios where either a binary state is to be represented or multiple discrete values can be selected from a list of options. When using a Checkbox, it’s recommended to list options in a logical order (alphabetically, numerically, etc.) and clearly set out the expectations for selection.

Do use a Checkbox when you have an obvious opposing binary state (Opt in/Opt out questions, On/Off toggles etc).

Do use a Checkbox when you have a small (5 or fewer) set of options that can have multiple selected.

When not to use

Do not use Checkbox in scenarios where a user has more than 5 options.
Instead use: Select

Do not use Checkbox when a user can only choose one option out of 2 options.
Instead use: Radio

Do not use Checkbox when the selection is exclusive (there is only one allowed).
Instead use: Radio



disabledwill disable the control when trueBooleanfalse-
modelValuewhether Checkbox is checked or notBooleanfalse-
indeterminatewhether Checkbox is indeterminate or notBooleanfalse-
labelsets the aria-label attribute of the Checkbox and hides the normal label slotString-
noFocussets the tabindex of the Checkbox to -1, preventing tab focusBooleanfalse-


  • update:modelValue - emits new value (true, false or undefined). Undefined is only emitted when using indeterminate state
  • click - emits underlying click event
  • keydown - emits underlying keydown event
  • indeterminate - emits new value


  • default - contents will be placed in a label for the Checkbox


  • feather-checkbox - selects the Checkbox control. Responds to click and keydown events
  • feather-checkbox-label - selects the Checkbox label



modelValueoptional object of checkbox values for validation onlyObjectfalse-
labellabel for the Checkbox groupStringtrue-
hinthint text to be displayed below the groupStringfalse-
errorerror text to be displayed below the groupStringfalse-
verticalwhen true will put Radio buttons in a vertical layoutBooleanfalsefalse
schemaa schema for use in validationObjectfalse-


  • default - the Checkboxes to be used in the group


  • feather-checkbox-group - selects the wrapper div for the group


Specifying a class or data-ref-id attribute will cause them to be applied to the component root container div. All other attributes are passed to the input where it makes sense. Some will be ignored if they conflict with attributes we need to use for accessibility.


The structure of Checkboxes means that their value is atomic and not shared with the CheckboxGroup by default. For convenient validation, you can instead bind Checkbox values to properties of an Object and pass in a validation schema. However, this is totally optional and can also be achieved without using an Object. Please see the Form Validation page for a working example.