Radio – Code

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>
  );
}

Basic radio input

The 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.

checked

boolean

default:"false"

Controlled checked state.

defaultChecked

boolean

default:"false"

Uncontrolled checked state.

description

string

Description text to display below the radio.

error

boolean

Error state for the radio.

icons

{ checked?: Svg; unchecked?: Svg }

Overrides for default icons.

label

ReactElement | string

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.

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 radio input

​Controlling radio state

​Using radio groups

​React Accessibility

​Markdown in legends

​Hide the legend

​Radio Props

​Radio.Group Props

Common Examples

Basic radio input

Controlling radio state

Using radio groups

React Accessibility

Markdown in legends

Hide the legend

`Radio` Props

`Radio.Group` Props