> ## 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.
# Radio – Code
> Radio buttons are form elements for selecting one option from a set of choices.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
};
```tsx lines expandable theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Radio } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
### 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`.
```tsx lines expandable theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
### Controlling radio state
Use the `checked` and `onClick` props to manually control the state of a radio.
```tsx lines expandable theme={null}
import { Radio, type RadioState } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [list, setList] = useState([
{
label: "Email",
checked: false,
},
{
label: "Text",
checked: true,
},
]);
const handleUpdate = (_state: RadioState | undefined, index: number) => {
setList((prev) =>
prev.map((item, i) => ({
label: item.label,
checked: index === i,
})),
);
};
return (
{list.map((item, i) => {
return (
handleUpdate(state, i)}
/>
);
})}
);
}
export default App;
```
### Using radio groups
The `Radio.Group` component acts as a wrapper around a collection of `Radio` components.
```tsx lines expandable theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## 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](/docs/accessibility/labels-and-ctas#input-field-context-association).
### Markdown in legends
The `Radio.Group` `legend` prop supports inline markdown: bold (`**text**`), italic (`*text*`), bold and italic (`***text***`), highlight (`==text==`), and code (`` `text` ``).
```tsx lines expandable theme={null}
import { Flex, Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Hide the legend
Use `hideLabel` on `Radio.Group` to visually hide the legend. The `legend` string is kept as a screen-reader-only `
```tsx theme={null}
console.log(state)}
/>
```
## `Radio` Props
In addition to the props listed below, the `Radio` component can accept any valid HTML `input` props.
Callback when the radio is changed.
Controlled checked state.
Uncontrolled checked state.
Description text to display below the radio.
Error state for the radio.
Overrides for default icons.
The `label` should have accessible `string` content.
```tsx theme={null}
```
## `Radio.Group` Props
In addition to the props listed below, the `Radio.Group` component can accept any valid HTML `fieldset` props.
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.
`}>
Additional props to pass to the legend [FieldLabel](/docs/web/components/field-label/code) component. Supports the `aiMark` prop for displaying [AI-powered field indicators](/docs/web/utilities/ai-marks).
