Checkbox – Code

Implementation
Checkbox Props
Checkbox.Group Props

Common Examples

import { Checkbox } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Checkbox.Group
      direction="column"
      legend="Preferred methods of communication"
    >
      <Checkbox label="Email" defaultChecked />
      <Checkbox label="Phone" />
      <Checkbox label="Text" />
    </Checkbox.Group>
  );
}

Basic checkbox inputs

The Checkbox component accepts many of the same props as an HTML input with type="checkbox", such as name, value, checked, and defaultChecked.

Controlling checkbox state

Use the checked and onClick props to manually control the state of a checkbox.

Indeterminate checkboxes

The indeterminate prop should be used to represent a checkbox that has checkbox children which some, but not all are checked.

React Accessibility

The Checkbox component’s label prop allows for any ReactElement to be passed in, but the label should always be populated with some text content that is screen-reader accessible.

For more guidance on form field labels and context, see input field context association best practices.

Markdown in legends

The Checkbox.Group legend prop supports inline markdown: bold (**text**), italic (*text*), bold and italic (***text***), highlight (==text==), and code (`text`).

Hide the legend

Use hideLabel on Checkbox.Group to visually hide the legend. The legend string is kept as a screen-reader-only <legend> element so the group remains accessible — any inline markdown is stripped to plain text.

<Checkbox
  defaultChecked={true}
  label="Click me to select!"
  onChange={(e, state) => {
    console.log(e, state.checked, state.value);
  }}
/>

`Checkbox` Props

checked

boolean

default:"false"

Controlled check state.

defaultChecked

boolean

default:"false"

Uncontrolled check state.

description

ReactNode

Helper text description below the checkbox.

error

boolean

default:"false"

icons

{ checked?: Svg, indeterminate?: Svg, unchecked?: Svg }

Overrides for default icons.

indeterminate

boolean

default:"false"

Sets the checkbox to an indeterminate state.

label

ReactElement | string

The label should have accessible string content.

onChange

(e: ChangeEvent<HTMLInputElement>, state?: CheckboxState) => void

Callback when the checkbox is changed.

onClick

(e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void

Callback when the checkbox is clicked.

<Checkbox.Group direction="column" legend="Checkbox Group">
  <Checkbox label="Checkbox 1" defaultChecked />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</Checkbox.Group>

`Checkbox.Group` Props

legend

ReactElement | string

required

The legend for the checkbox group. Supports inline markdown formatting.

Passing ReactElement is deprecated — use a plain string with inline markdown instead.

flexDirection

"column" | "row"

default:"column"

The direction that the checkboxes are organized. This is inherited from LayoutUtilProps.

hideLabel

boolean

default:"false"

Visually hides the legend while keeping it accessible to screen readers.

legendProps

Additional props to pass to the legend FieldLabel component. Supports the aiMark prop for displaying AI-powered field indicators.

required

boolean

​Common Examples

​Basic checkbox inputs

​Controlling checkbox state

​Indeterminate checkboxes

​React Accessibility

​Markdown in legends

​Hide the legend

​Checkbox Props

​Checkbox.Group Props

Common Examples

Basic checkbox inputs

Controlling checkbox state

Indeterminate checkboxes

React Accessibility

Markdown in legends

Hide the legend

`Checkbox` Props

`Checkbox.Group` Props