Checkbox

Checkbox input with labels and form chrome.

Introduction

Use checkboxes when users may select zero, one, or multiple independent options. Use indeterminate for parent “select all” controls when some children are checked. For mutually exclusive choices, use Radio; for on/off settings, consider Switch.

endLabel / startLabel and description are built into the component. Compose multiple Checkbox instances in your layout for multi-select lists.

Import

import { Checkbox } from "@bridge-ui/vue/Components/Checkbox";

import { Checkbox } from "@bridge-ui/react/Components/Checkbox";

Basic usage

Provide endLabel / startLabel and optional description. In React, use checked and onChange for controlled state; in Vue, use v-model. For uncontrolled usage with an initial state, use defaultChecked in React or default-checked in Vue.

Colors

Use the color prop to change the checkbox color. Available colors: primary, secondary, success, info, warning, error, and dark.

Sizes

Control the checkbox size with the size prop. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

Indeterminate

Set indeterminate to show a partial selection state, commonly used for “select all” controls when some but not all child items are checked.

Validation

Use required to mark the field as required, error with errorMessage for invalid state, and disabled to prevent interaction.

Related components

Label, Radio, Switch

Accessibility

• Space toggles the checkbox when the native input is focused
• Tab and Shift+Tab move between controls in the page
• A visually hidden native <input type="checkbox"> holds state; the styled control has aria-hidden
• endLabel is associated with the input through matching id and htmlFor
• error sets aria-invalid on the input and data-invalid on the FormControl root
• disabled sets aria-disabled on the FormControl root

Anatomy

<div data-invalid>
  <div>
    <!-- row -->
    <label>
      <!-- field label wrapping control -->
      <input type="checkbox" class="sr-only" id="..." />
      <span aria-hidden="true">
        <!-- visual checkbox -->
        <!-- check icon or indeterminate bar -->
      </span>
    </label>
    <label for="...">End label</label>
  </div>
  <p>Description</p>
  <p aria-hidden>Error message</p>
</div>

API