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 { Checkboxes, Checkbox } from '@allxsmith/bestax-bulma';

---

Usage

Basic Checkbox

This example shows a simple Checkbox component for a single boolean choice. The label is provided as the children prop, and the checkbox is fully accessible and styled with Bulma.

<Checkbox> Stay Signed In </Checkbox>

Checkbox With Link

This example demonstrates using the Checkbox component with a custom label that includes a link. The children prop can contain any React nodes, such as anchor tags, to create rich, accessible labels for agreements or terms.

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

Disabled Checkbox

Set the disabled prop to render a non-interactive checkbox. This is useful for indicating unavailable options in forms, and the checkbox will appear visually disabled and cannot be toggled by the user.

<Checkbox disabled> Stay Signed In </Checkbox>

Group/List of Checkboxes

This example uses the Checkboxes component to render a list of checkboxes. Each Checkbox receives its own label via the children prop. Use this pattern for lists of boolean options, such as tasks or preferences.

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

Valid Colors and Sizes

The values color and size accept are exported as readonly tuples, checkboxColors and checkboxSizes. The prop types are built from them, so they hold the same values as the Props table below. Map over them to build a color or size picker, or check a value that arrives at runtime (from a CMS or a query string, say) before you pass it in: a value outside the tuple adds no modifier class. Import them from the package root. The valid value constants page covers the typing and validation idioms.

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

function example() {
  return (
    <>
      <Checkboxes>
        {checkboxColors.map(color => (
          <Checkbox key={color} color={color} defaultChecked>
            {color}
          </Checkbox>
        ))}
      </Checkboxes>
      <Checkboxes>
        {checkboxSizes.map(size => (
          <Checkbox key={size} size={size} defaultChecked>
            {size}
          </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.

---

Related Components

• Checkboxes: For grouped checkboxes.
• Field: For labeled/structured forms.
• Helper Props: For spacing, color, etc.

---

Additional Resources

• Bulma Checkbox Documentation
• Storybook: Checkbox Stories

---

Props

Prop	Type	Default	Description
color	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'	—	Color of the checkbox.
size	'small' | 'normal' | 'medium' | 'large'	—	Size of the checkbox.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
disabled	boolean	false	Whether the checkbox is disabled.
className	string	—	Additional CSS classes to apply.
children	React.ReactNode	—	The label/content for the checkbox.
ref	React.Ref<HTMLInputElement>	—	Forwarded to the underlying element.
...	All standard <input> attributes and Bulma helper props	—	See Helper Props

---

CSS & Sass Variables

Checkbox registers these variables on its own .styled-checkbox element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
--bulma-checkbox-size	$checkbox-size	1.25em
--bulma-checkbox-border-width	$checkbox-border-width	2px
--bulma-checkbox-radius	$checkbox-radius	var(--bulma-radius-small)
--bulma-checkbox-border-color	$checkbox-border-color	var(--bulma-border)
--bulma-checkbox-background	$checkbox-background	transparent
--bulma-checkbox-check-color	$checkbox-check-color	var(--bulma-scheme-invert)
--bulma-checkbox-active-color	$checkbox-active-color	var(--bulma-primary)
--bulma-checkbox-label-gap	$checkbox-label-gap	0.5em
--bulma-checkbox-focus-shadow-size	$checkbox-focus-shadow-size	0 0 0 0.125em
--bulma-checkbox-transition-duration	$checkbox-transition-duration	var(--bulma-duration)
--bulma-checkbox-indeterminate-color	$checkbox-indeterminate-color	var(--bulma-primary)