Checkbox

Checkbox

Basic Checkbox

With Label

Accept terms and conditionsSubscribe to newsletter

With Label + Description

Email notificationsReceive email updates about your account activityMarketing emailsGet news about new features and special offers

Indeterminate State

Select all

Item 1Item 2Item 3

Disabled State

Disabled uncheckedDisabled checked

Usage

import { Checkbox } from "@f0rbit/ui";

<Checkbox />

With Label

Add a label to describe the checkbox:

<Checkbox label="Accept terms and conditions" />
<Checkbox label="Subscribe to newsletter" />

With Description

Provide additional context with a description:

<Checkbox
  label="Email notifications"
  description="Receive email updates about your account activity"
/>

Controlled State

Control the checkbox state with checked and onChange:

const [checked, setChecked] = createSignal(false);

<Checkbox
  checked={checked()}
  onChange={() => setChecked(!checked())}
  label="Toggle me"
/>

Indeterminate State

Use indeterminate for partial selections (e.g., “select all” with some items selected):

<Checkbox
  label="Select all"
  checked={allChecked()}
  indeterminate={someChecked()}
  onChange={toggleAll}
/>

Disabled State

<Checkbox label="Disabled unchecked" disabled />
<Checkbox label="Disabled checked" disabled checked />

Checkbox Group

Create a group of related checkboxes:

const [selected, setSelected] = createSignal<string[]>([]);

const toggle = (value: string) => {
  setSelected(prev =>
    prev.includes(value)
      ? prev.filter(v => v !== value)
      : [...prev, value]
  );
};

<div class="stack-sm">
  <Checkbox
    label="Email notifications"
    checked={selected().includes("email")}
    onChange={() => toggle("email")}
  />
  <Checkbox
    label="SMS notifications"
    checked={selected().includes("sms")}
    onChange={() => toggle("sms")}
  />
  <Checkbox
    label="Push notifications"
    checked={selected().includes("push")}
    onChange={() => toggle("push")}
  />
</div>

Select All Pattern

Implement a “select all” checkbox with child items:

const items = ["Documents", "Images", "Videos", "Music"];
const [selected, setSelected] = createSignal<string[]>([]);

const allSelected = () => selected().length === items.length;
const someSelected = () => selected().length > 0 && !allSelected();

const toggleAll = () => {
  setSelected(allSelected() ? [] : [...items]);
};

const toggleItem = (item: string) => {
  setSelected(prev =>
    prev.includes(item)
      ? prev.filter(v => v !== item)
      : [...prev, item]
  );
};

<div class="stack-sm">
  <Checkbox
    label="Select all files"
    checked={allSelected()}
    indeterminate={someSelected()}
    onChange={toggleAll}
  />
  <div class="stack-sm" style={{ "margin-left": "1.5rem" }}>
    <For each={items}>
      {item => (
        <Checkbox
          label={item}
          checked={selected().includes(item)}
          onChange={() => toggleItem(item)}
        />
      )}
    </For>
  </div>
</div>

Props

Prop	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked
indeterminate	boolean	false	Show indeterminate state (partial selection)
label	string	—	Label text displayed next to the checkbox
description	string	—	Description text below the label
disabled	boolean	false	Disable the checkbox
onChange	() => void	—	Callback when checkbox is toggled