Checkbox – Code

Implementation
Checkbox Props

Common Examples

To use the Checkbox, import it from @servicetitan/anvil2-ai-kit and pass a visible label, or omit label and supply exactly one of aria-label or aria-labelledby.

import { Checkbox } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <Checkbox label="Notify customer" />;
}

Selection

Use isSelected with onChange for controlled selection, or defaultSelected for uncontrolled.

Indeterminate

isIndeterminate is a display-only mixed state for select-all rows. Derive it from child selection in your own logic.

Label and indicator-only

A visible label is the accessible name. For dense rows, omit label and name the control with aria-label or aria-labelledby. Never pass both naming attributes.

Disabled

isDisabled dims the control and blocks interaction in either selection state.

React Accessibility

Supply a visible label, or exactly one of aria-label or aria-labelledby.
Keyboard focus draws a ring on the square indicator, not the full label width.
Users toggle a focused checkbox with Space.

<Checkbox
  label="Notify customer"
  isSelected={false}
  onChange={(isSelected) => {}}
/>

`Checkbox` Props

The Checkbox accepts the following props. Pass a label, or omit label and pass exactly one of aria-label or aria-labelledby.

string

Accessible name when there is no visible label. Mutually exclusive with aria-labelledby.

string

id(s) of the element(s) that name an indicator-only checkbox. Mutually exclusive with aria-label.

string

Class merged onto the root label.

boolean

Whether the checkbox starts checked when uncontrolled.

boolean

Whether the checkbox is disabled.

boolean

Mixed selection state for select-all controls. Display only; it does not replace isSelected.

boolean

Whether the checkbox is checked when controlled.

string

Visible label and accessible name. Omit for indicator-only checkboxes.

(isSelected: boolean) => void

Called when the checked state changes.

AI Kit

Agent Experience

Checkbox – Code

Common Examples

Selection

Indeterminate

Label and indicator-only

Disabled

React Accessibility

`Checkbox` Props

​Common Examples

​Selection

​Indeterminate

​Label and indicator-only

​Disabled

​React Accessibility

​Checkbox Props

Common Examples

Selection

Indeterminate

Label and indicator-only

Disabled

React Accessibility

`Checkbox` Props