Skip to main content

Checkboxes

Overview​

The Checkboxes component wraps multiple Checkbox components in a Bulma-styled group. Use for 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​

This example demonstrates the Checkboxes component wrapping multiple Checkbox children. Use this pattern for lists of boolean options, such as to-do lists or preference selections. Each Checkbox receives its own label via the children prop.

Live Editor
<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​