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.

<script setup lang="ts">
import { ref } from "vue";

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

const terms = ref(false);
</script>

<template>
  <div class="flex w-full flex-col gap-6">
    <Checkbox
      end-label="Accept terms"
      description="Receive updates about your account."
    />

    <Checkbox v-model="terms" end-label="Remember me" />
  </div>
</template>

import { useState } from "react";

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

export default function CheckboxBasic() {
  const [terms, setTerms] = useState(false);

  return (
    <div className="flex w-full flex-col gap-6">
      <Checkbox
        endLabel="Accept terms"
        description="Receive updates about your account."
      />

      <Checkbox
        checked={terms}
        endLabel="Remember me"
        onChange={(event) => setTerms(event.target.checked)}
      />
    </div>
  );
}

Colors

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

<script setup lang="ts">
import { Checkbox } from "@bridge-ui/vue/Components/Checkbox";
</script>

<template>
  <div class="flex w-full flex-col gap-6">
    <Checkbox default-checked color="primary" end-label="primary checkbox" />
    <Checkbox
      default-checked
      color="secondary"
      end-label="secondary checkbox"
    />
    <Checkbox default-checked color="success" end-label="success checkbox" />
    <Checkbox color="info" default-checked end-label="info checkbox" />
    <Checkbox default-checked color="warning" end-label="warning checkbox" />
    <Checkbox color="error" default-checked end-label="error checkbox" />
    <Checkbox color="dark" default-checked end-label="dark checkbox" />
  </div>
</template>

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

export default function CheckboxColors() {
  return (
    <div className="flex w-full flex-col gap-6">
      <Checkbox defaultChecked color="primary" endLabel="primary checkbox" />
      <Checkbox
        defaultChecked
        color="secondary"
        endLabel="secondary checkbox"
      />
      <Checkbox defaultChecked color="success" endLabel="success checkbox" />
      <Checkbox color="info" defaultChecked endLabel="info checkbox" />
      <Checkbox defaultChecked color="warning" endLabel="warning checkbox" />
      <Checkbox color="error" defaultChecked endLabel="error checkbox" />
      <Checkbox color="dark" defaultChecked endLabel="dark checkbox" />
    </div>
  );
}

Sizes

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

<script setup lang="ts">
import { Checkbox } from "@bridge-ui/vue/Components/Checkbox";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Checkbox size="2xs" default-checked end-label="2xs checkbox" />
    <Checkbox size="xs" default-checked end-label="xs checkbox" />
    <Checkbox size="sm" default-checked end-label="sm checkbox" />
    <Checkbox size="md" default-checked end-label="md checkbox" />
    <Checkbox size="lg" default-checked end-label="lg checkbox" />
    <Checkbox size="xl" default-checked end-label="xl checkbox" />
    <Checkbox size="2xl" default-checked end-label="2xl checkbox" />
  </div>
</template>

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

export default function CheckboxSizes() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Checkbox size="2xs" defaultChecked endLabel="2xs checkbox" />
      <Checkbox size="xs" defaultChecked endLabel="xs checkbox" />
      <Checkbox size="sm" defaultChecked endLabel="sm checkbox" />
      <Checkbox size="md" defaultChecked endLabel="md checkbox" />
      <Checkbox size="lg" defaultChecked endLabel="lg checkbox" />
      <Checkbox size="xl" defaultChecked endLabel="xl checkbox" />
      <Checkbox size="2xl" defaultChecked endLabel="2xl checkbox" />
    </div>
  );
}

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

<script setup lang="ts">
import { Checkbox } from "@bridge-ui/vue/Components/Checkbox";
</script>

<template>
  <div class="flex flex-wrap items-center gap-6">
    <Checkbox rounded="none" default-checked end-label="none" />
    <Checkbox rounded="sm" end-label="sm" default-checked />
    <Checkbox rounded="md" end-label="md" default-checked />
    <Checkbox rounded="2xl" default-checked end-label="2xl" />
    <Checkbox rounded="full" default-checked end-label="full" />
  </div>
</template>

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

export default function CheckboxRounded() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <Checkbox defaultChecked rounded="none" endLabel="none" />
      <Checkbox rounded="sm" endLabel="sm" defaultChecked />
      <Checkbox rounded="md" endLabel="md" defaultChecked />
      <Checkbox rounded="2xl" defaultChecked endLabel="2xl" />
      <Checkbox defaultChecked rounded="full" endLabel="full" />
    </div>
  );
}

Indeterminate

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

<script setup lang="ts">
import { Checkbox } from "@bridge-ui/vue/Components/Checkbox";
</script>

<template>
  <div class="flex w-full flex-col gap-6">
    <Checkbox indeterminate end-label="Select all" />

    <Checkbox default-checked end-label="Item A" />

    <Checkbox end-label="Item B" />
  </div>
</template>

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

export default function CheckboxIndeterminate() {
  return (
    <div className="flex w-full flex-col gap-6">
      <Checkbox indeterminate endLabel="Select all" />

      <Checkbox defaultChecked endLabel="Item A" />

      <Checkbox endLabel="Item B" />
    </div>
  );
}

Validation

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

<script setup lang="ts">
import { Checkbox } from "@bridge-ui/vue/Components/Checkbox";
</script>

<template>
  <div class="flex w-full flex-col gap-6">
    <Checkbox required end-label="Required field" />

    <Checkbox
      error
      end-label="Invalid option"
      error-message="You must accept to continue."
    />

    <Checkbox disabled :model-value="true" end-label="Disabled" />
  </div>
</template>

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

export default function CheckboxValidation() {
  return (
    <div className="flex w-full flex-col gap-6">
      <Checkbox required endLabel="Required field" />

      <Checkbox
        error
        endLabel="Invalid option"
        errorMessage="You must accept to continue."
      />

      <Checkbox disabled defaultChecked endLabel="Disabled" />
    </div>
  );
}

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

Prop	Type	Default	Description
v-model	boolean	—	Two-way binding for the checked state.
default-checked	boolean	false	Initial checked state for uncontrolled usage (without v-model).

Prop	Type	Default	Description
checked	boolean	—	Checked state. Use with onChange for controlled state.
defaultChecked	boolean	—	Initial checked state for uncontrolled usage.
onChange	ChangeEventHandler<HTMLInputElement>	—	Native input change handler.

Prop	Type	Default	Description
endLabel	string	—	Label text after the control (LTR: right).
startLabel	string	—	Label text before the control (LTR: left).
description	string	—	Helper text below the control row.
error	boolean	false	Applies invalid styling and sets aria-invalid.
errorMessage	string	—	Error message shown below the control row.
required	boolean	false	Sets the native required attribute on the input.
disabled	boolean	false	Whether the checkbox is disabled.
indeterminate	boolean	false	Whether the checkbox is in an indeterminate state.
color	CheckboxColor	"primary"	Semantic color of the checkbox.
size	CheckboxSize	"md"	Size of the control and label typography.
rounded	CheckboxRounded	"sm"	Border radius of the checkbox control.
classes	CheckboxClasses	—	Classes for form control chrome and checkbox parts.
customProps	CheckboxCustomProps	—	Extra props for FormControl chrome and control parts. startLabel / endLabel accept Label props (no children).
slots	CheckboxSlots	—	React slots for chrome and the control.