Checkbox - Web (AI Kit)

For development, import Checkbox from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

The Checkbox supports selection, an indeterminate mixed state, and either a visible label or an indicator-only presentation.

Selection

The checkbox toggles between unselected and selected. Use isSelected for controlled selection or defaultSelected for uncontrolled.

Indeterminate

isIndeterminate renders a minus indicator for a select-all row whose children are only partially selected. It’s a display-only override — pair it with your own logic to derive the mixed state from the children’s selection, as shown above.

Label

A visible label doubles as the accessible name. Omit label and supply aria-label or aria-labelledby instead for an indicator-only checkbox — common in dense table rows.

Behavior

The Checkbox responds to selection, focus, and disabled states.

Visual States

Selecting the checkbox fills the indicator; keyboard focus draws a ring scoped to the square indicator, not the full label width. isDisabled dims the control and blocks interaction in either selection state.

Usage Guidelines

When to Use

Use the Checkbox when:

Selecting options from a set – Users choose one or more independent options.
Selecting all in a group – A select-all row controls child options. Show the indeterminate state when only some children are selected.
Selecting rows in dense layouts – Table rows or other compact layouts have no room for a visible label. Use an indicator-only Checkbox with an accessible name.

When not to use

Avoid using the Checkbox for:

Picking options from a list that opens from a trigger – Use the Menu with single or multiple selection instead.
Toggling a button-style setting, such as bold or list view – Use the Button Toggle instead.

Keyboard Interaction

Users can navigate and toggle the Checkbox using standard keyboard controls.

Key	Description
Tab	Moves focus to the next checkbox
Space	Toggles the focused 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.

Concepts & Guidelines

Anvil2

Resources

Checkbox - Web (AI Kit)

Options

Selection

Indeterminate

Label

Behavior

Visual States

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Selection

Indeterminate

Label and indicator-only

Disabled

React Accessibility

`Checkbox` Props

​Options

​Selection

​Indeterminate

​Label

​Behavior

​Visual States

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Selection

​Indeterminate

​Label and indicator-only

​Disabled

​React Accessibility

​Checkbox Props

Options

Selection

Indeterminate

Label

Behavior

Visual States

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Selection

Indeterminate

Label and indicator-only

Disabled

React Accessibility

`Checkbox` Props