Checkbox · Smallest

Default

Pass the label as children so the text and control share one hit target.

Send a transcript after each call

Sizes

The default size is sm (16px). md is 20px and lg is 24px.

Record callsRecord callsRecord calls

import { Checkbox } from "@smallest-inc/ui";

export default function CheckboxSizes() {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox size="sm" defaultChecked>
        Record calls
      </Checkbox>
      <Checkbox size="md" defaultChecked>
        Record calls
      </Checkbox>
      <Checkbox size="lg" defaultChecked>
        Record calls
      </Checkbox>
    </div>
  );
}

Without label

In table rows, omit children and give each checkbox an aria-label that names the row.

Disabled

Allow outbound callsAllow inbound calls

Error

Set aria-invalid for the danger ring and point aria-describedby at the message.

Callers are told the call is recorded

import { Checkbox } from "@smallest-inc/ui";

export default function CheckboxError() {
  return (
    <div className="flex flex-col gap-2">
      <Checkbox aria-invalid aria-describedby="consent-error">
        Callers are told the call is recorded
      </Checkbox>
      <p id="consent-error" className="text-sm text-danger-fg">
        Confirm recording consent to publish this agent.
      </p>
    </div>
  );
}

Best practices

When to use

Use for additive selection, acknowledgements, and multi-select lists.
Use Switch for one immediate on/off setting and Radio for one choice from mutually exclusive options.

Behavior

Put the label in Checkbox children so the text and control share one hit target.
Use size sm (16px) by default. Use md or lg only when the checkbox sits beside larger type.
Validate required acknowledgements on submit, not on every toggle. Set aria-invalid to show the danger ring.

Content

Write labels as the thing that becomes true when checked, such as “Send a transcript after each call”.

Accessibility

Group related choices in a Fieldset. Give row-selection checkboxes an aria-label that names the row, such as “Select call from +1 415 555 0132”.
Point aria-describedby at the error message when using aria-invalid.