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.

Demo

Controlling checkbox state

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

Demo

Indeterminate checkboxes

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

Demo

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.

<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

flexDirection

"column" | "row"

default:"column"

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

moreInfo

ReactNode

Displays in a tooltip at the legend.

required

boolean

Anvil2 Web

Resources

Common Examples

Basic checkbox inputs

Controlling checkbox state

Indeterminate checkboxes

React Accessibility

`Checkbox` Props

`Checkbox.Group` Props

Anvil2 Web

Resources

​Common Examples

​Basic checkbox inputs

​Controlling checkbox state

​Indeterminate checkboxes

​React Accessibility

​Checkbox Props

​Checkbox.Group Props

Common Examples

Basic checkbox inputs

Controlling checkbox state

Indeterminate checkboxes

React Accessibility

`Checkbox` Props

`Checkbox.Group` Props