Skip to content

CheckboxGroup

Jonathan Langlois edited this page Dec 2, 2020 · 8 revisions

CheckboxGroup

A grouping component for multiple related checkboxes

Intended Usage

<CheckboxGroup name="" title="">
  <CheckboxGroup.Item label="label1"/>
  <CheckboxGroup.Item label="label2" />
</CheckboxGroup>
Group Prop Type Description
Sizes mini boolean Sizing options intended to modify font-size and padding
tiny
small
medium
large
big
huge
Title title string Title to display for the group
Name name string name to be applied to all children checkboxes
Disabled disabled boolean disable checkbox group

Accessibility

CheckboxGroup is intended to be a wrapper element that will use a fieldset around the related checkbox elements. This will make it easier for users to group and label related inputs naturally, but will be the same result as using a fieldset along with checkboxes.

Expected behaviours in progressive enhancements

HTML

  • it displays the checkbox group and submits the form data when the parent form is submitted.

HTML + CSS

  • it applies the theme styles; no additional functional enhancement.

HTML + CSS + JS

  • it support custom event handlers.

Clone this wiki locally