CheckboxGroup

A group of checkboxes from an array of items to select.

If you need more control over the labels and checkbox layout, you may use the individual Checkbox component.

Related Components
Checkbox
Showcase

Select your favorite sports:

And color as well (up to 2):

Source 
<script>
  const items = [
    {
      value: 'couch_potato',
      label: 'Sitting lazily on the couch',
      checked: true,
      disabled: true
    },
    { value: 'cycling', label: 'Cycling' },
    { value: 'running', label: 'Running' },
    { value: 'swimming', label: 'Olympic Swimming' },
  ];
  const colors = [
    { value: '#000000' },
    { value: '#ff0000' },
    { value: '#00ff00' },
    { value: '#ffffff' },
  ];
</script>

<p>Select your favorite sports:</p>
<CheckboxGroup name="sports[]" {items} />
<p>And color as well (up to 2):</p>
<CheckboxGroup
  color
  round
  items={colors}
  name="colors[]"
  max={2}
  class="colored"
/>

Properties #

Style Properties

Name
Default
Type
Description
labelsLeft false boolean Places the labels to the left of the checkboxes.

Functional Properties

Name
Default
Type
Description
items * Array An array of { value, label, checked, disabled } objects, where only the value is required. Must contain at least one value.
name * string The name to assign to all checkboxes belonging to the same group. Check MDN docs for more information.
max Infinity number The maximum allowed number of checkboxes to select.
color false boolean Designates the checkboxes as color choices. Labels are ignored and values are expected to be "#RRGGBB".
maxReachedTooltip `Can only select ${max} value${s(max)}.` string The tooltip to display when the maximum number of checkboxes has been selected.
... any Everything else will be passed to the underlying <Checkbox> components.
* Required

Class Properties

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to assign to the wrapper <div> element.
checkboxClass null string A class string to add to the <Checkbox> components.
labelClass null string A class string to assign to the labels' wrapping <span>s.
If this is not passed, the labels are not wrapped in a <span>.

Events #

Name
Event Detail
Description
change { value, checked, nativeEvent } Fired when the selection changes. The value contains the element's value passed as a prop, checked represents the input's state, and nativeEvent has the native change event.

SCSS Variables #

Name
Description
Default
$main From Checkbox The fill color of the checked checkbox.
#4300B0
$font From Checkbox The font of the checkbox's label. 'Ubuntu'
$disabled From Checkbox The fill color of the disabled checkbox.
#888888
$dark From Checkbox The background color of the checkbox hover signifier.
#333333
$light-contrast From Checkbox The border color of an unchecked checkbox, or the fill color of a checked disabled one.
#DDDDDD
$main-text From Checkbox The color of the checkmark.
#FFFFFF