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.

Demo

Controlling radio state

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

Demo

Using radio groups

The Radio.Group component acts as a wrapper around a collection of Radio components.

Demo

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.

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

moreInfo

ReactNode

Displays in a tooltip at the legend.

required

boolean

Anvil2 Web

Resources

Common Examples

Basic radio input

Controlling radio state

Using radio groups

React Accessibility

`Radio` Props

`Radio.Group` Props

Anvil2 Web

Resources

​Common Examples

​Basic radio input

​Controlling radio state

​Using radio groups

​React Accessibility

​Radio Props

​Radio.Group Props

Common Examples

Basic radio input

Controlling radio state

Using radio groups

React Accessibility

`Radio` Props

`Radio.Group` Props