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
Radio Props
Radio.Group Props
Common Examples
import { Radio } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Radio.Group Group legend="Preferred method of communication">
<Radio name="comm" label="Email" defaultChecked />
<Radio name="comm" label="Phone" />
<Radio name="comm" label="Text" />
</Radio.Group>
);
}
Radio component accepts many of the same props as an HTML input with type="radio", such as name, value, checked, and defaultChecked.Controlling radio state
Use the checked and onClick props to manually control the state of a radio.Using radio groups
The Radio.Group component acts as a wrapper around a collection of Radio components.React Accessibility
- The
Radio 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 Radio.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 Radio.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.<Radio
name="option"
label="Option 1"
value="option1"
defaultChecked={false}
checked={false}
error={false}
icons={{ checked: CheckIcon, unchecked: UncheckIcon }}
onChange={(e, state) => console.log(state)}
/>
Radio Props
In addition to the props listed below, the Radio component can accept any valid HTML input props.onChange
(e: ChangeEvent, state: { checked: boolean; value: string | string[] | number }) => void
required
Callback when the radio is changed.
Controlled checked state.
Uncontrolled checked state.
Description text to display below the radio.
Error state for the radio.
icons
{ checked?: Svg; unchecked?: Svg }
Overrides for default icons.
The label should have accessible string content.
<Radio.Group
legend="Select an option"
moreInfo="Additional information"
required={false}
>
<Radio name="option" label="Option 1" />
<Radio name="option" label="Option 2" />
</Radio.Group>
Radio.Group Props
In addition to the props listed below, the Radio.Group component can accept any valid HTML fieldset props.legend
ReactElement | string
required
The legend for the radio group. Supports inline markdown formatting.Passing ReactElement is deprecated — use a plain string with inline markdown instead.
Visually hides the legend while keeping it accessible to screen readers.
