Skip to main content

Checkboxes

Overview​

The Checkboxes component wraps multiple Checkbox components in a Bulma-styled group. Use for vertical lists of boolean choices, such as preference lists or to-do checklists.

Import​

import { Checkboxes, Checkbox } from '@allxsmith/bestax-bulma';

Props​

PropTypeDescription
classNamestringAdditional CSS classes.
childrenReact.ReactNodeCheckbox elements to render in the group.
...All Bulma helper props(See Helper Props)

Usage​

Grouped Checkboxes​

<Checkboxes>
  <Checkbox>Make the bed</Checkbox>
  <Checkbox>Brush teeth</Checkbox>
  <Checkbox>Do homework</Checkbox>
  <Checkbox>Feed the pet</Checkbox>
  <Checkbox>Take out the trash</Checkbox>
  <Checkbox>Clean your room</Checkbox>
  <Checkbox>Set the table</Checkbox>
  <Checkbox>Help with dishes</Checkbox>
  <Checkbox>Water the plants</Checkbox>
  <Checkbox>Put away toys</Checkbox>
</Checkboxes>

Accessibility​

  • The group is rendered as a <div class="checkboxes"> containing labeled checkboxes.
  • Each child should be a Checkbox for proper labeling and accessibility.
  • Checkbox: Individual checkbox.
  • Field: For labeled/grouped form fields.

Additional Resources​