Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
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>
);
}
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
Uncontrolled check state.
Helper text description below the checkbox.
icons
{ checked?: Svg, indeterminate?: Svg, unchecked?: Svg }
Overrides for default icons.
Sets the checkbox to an indeterminate state.
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.
Visually hides the legend while keeping it accessible to screen readers.
