Skip to main content

Checkbox

Overview​

The Checkbox component provides a Bulma-styled checkbox input with flexible labels and helper classes. Use it for single boolean choices, forms, or within a group using the Checkboxes component.

info

Use Checkbox for toggling a single item. For groups, use with Checkboxes.

Import​

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

Props​

PropTypeDefaultDescription
disabledboolean—Whether the checkbox is disabled.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Label/content for the checkbox.
...All standard HTML <input> and Bulma helper props(See Helper Props)

Usage​

Basic Checkbox​

<Checkbox>Stay Signed In</Checkbox>
<Checkbox>
  I have read and agree to the
  <a href="#" target="_blank" rel="noopener noreferrer">
    terms and conditions
  </a>
  .
</Checkbox>

Disabled Checkbox​

<Checkbox disabled>Stay Signed In</Checkbox>

Accessibility​

  • The checkbox is rendered as a <label> wrapping an <input type="checkbox">.
  • The children prop provides the accessible label.

title: Checkbox sidebar_label: Checkbox

Checkbox

Overview​

The Checkbox component provides a Bulma-styled checkbox input. Pass the label as children; you can include plain text, links, or custom JSX. Use it for boolean choices and combine with the Checkboxes component for grouped options.

Import​

import Checkbox from '@allxsmith/bestax-bulma';
import Checkboxes from '@allxsmith/bestax-bulma'; // for groups

Props​

PropTypeDescription
disabledbooleanWhether the checkbox is disabled.
classNamestringAdditional CSS classes.
childrenReact.ReactNodeLabel/content for the checkbox.
...All standard <input> and Bulma helper props(See Helper Props)

Usage​

Basic Checkbox​

<Checkbox>Stay Signed In</Checkbox>
<Checkbox>
  I have read and agree to the{' '}
  <a href="#" target="_blank" rel="noopener noreferrer">
    terms and conditions
  </a>
  .
</Checkbox>

Disabled Checkbox​

<Checkbox disabled>Stay Signed In</Checkbox>

Group/List of Checkboxes​

Use the Checkboxes wrapper for a vertical group.

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

  • Each Checkbox is rendered as a <label> wrapping an <input type="checkbox"> and the label text, for optimal accessibility.
  • The clickable area includes both box and label by default.

Additional Resources​

Additional Resources​