> ## 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 – Design
> 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
## Anatomy
The Radio uses two primary elements to help users select one option from a set of choices, the radio itself, and its corresponding label.
1. Radio button
2. Label
## Options
Configure the Radio to accommodate the following scenarios:
### States
#### Default
```tsx lines theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### Disabled
```tsx lines theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Description
```tsx lines theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
Descriptions provide information to help the user avoid errors.
## Behavior
The Radio uses standard form control behaviors.
## Usage Guidelines
Use the Radio when users must select one option from a mutually exclusive set.
### When to Use
Use Radio buttons to choose between small sets of items, usually 5 or fewer. Since all options are always visible, users can quickly scan and compare them. You can provide additional context through helper text or a help tooltip to help users choose accurately.
### Alternatives
#### Radio vs Combobox
Both Radio buttons and the Combobox allow users to select a single option from a set. Generally use Radio buttons when there are 2–7 options and a Combobox when there are 8 or more.
In a Radio Group, all options are equally visible, whereas a Combobox highlights only the selected option.
#### Radio vs Listbox
For simple selection lists in a form, use a Radio.
For selection lists that need to be an overlay, use a Listbox with a Combobox.
#### Radio vs Segmented Control
Radio buttons are form controls that require explicit submission. Segmented Controls apply selection immediately to the UI.
#### Radio vs Switch
A Switch toggles between two states and takes effect immediately. Radio buttons let users choose from two or more options and require form submission. Use Radio buttons in form layouts when users select between multiple options.
#### Radio vs Checkbox vs Switch
Use Radio buttons to select a single option from mutually exclusive choices. Use Checkboxes to make zero to many selections from available options.
| | Checkbox | Switch | Radio |
| ---------------------------------------------------------------------------- | ----------------------------------- | ------------------------- | ----------------------------------- |
| When is the selection executed? | After a user clicks a submit button | Immediately | After a user clicks a submit button |
| How many options are available? | 1 or more | 1 | 2 or more |
| Must an option be reducible to an on or off context? | No, it can be other things. | Yes | No, it can be other things. |
| If I had a group of this UI, what is the relation of each item in the group? | Independent of each other | Independent of each other | Mutually exclusive |
| Indeterminate state possible? | Yes | No | No |
### How to Use
#### Radio Groups
Group related Radio buttons together in a Radio Group. In most cases, include a label.
#### Default selection
Provide a default option in a Radio Group when possible. This:
* Signals that a selection is required
* Can expedite tasks
* Guides users toward a recommended option
Avoid a default selection when it could lead to unexpected downstream effects.
Source: [Nielsen Norman](https://www.nngroup.com/articles/radio-buttons-default-selection/)
```tsx lines theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### Inclusion of an "Other" selection
When a Radio Group includes an "Other" option, selecting it should reveal a Text Field so users can enter custom text.
```tsx lines theme={null}
import { Radio, TextField, Flex } from "@servicetitan/anvil2";
import { useState, useId } from "react";
function App() {
const [selectedValue, setSelectedValue] = useState("other");
const [otherValue, setOtherValue] = useState("");
const otherInputId = useId();
return (
setSelectedValue("search")}
/>
setSelectedValue("social")}
/>
setSelectedValue("recommendation")}
/>
setSelectedValue("other")}
aria-describedby={
selectedValue === "other" ? otherInputId : undefined
}
/>
{selectedValue === "other" && (
setOtherValue(e.target.value)}
disabled={selectedValue !== "other"}
style={{
marginInlineStart: "2rem",
}}
/>
)}
);
}
export default App;
```
## Content
Radio content should clearly communicate options and provide context for informed decisions.
### The Radio Group's title and description communicate its main purpose
Titles should clearly communicate the Radio Group's purpose at a glance. Descriptions provide additional context about the decision users need to make.
```tsx lines theme={null}
import { Radio, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
Assign geofence tracking to vehicles
A geofence can be applied to a selection of individual vehicles or
assigned to one or more vehicle groups.
}
>
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
**Don't**
### Use descriptive Radio input labels
Users rely on labels to understand what each Radio input controls. Use positive, active wording for Radio input labels.
Use sentence case (capitalize only the first word and proper nouns) so control labels are easy to scan. Do not use periods for short phrases or single sentences.
"Leaky bathroom faucet"\
"Clogged kitchen drain"\
"No hot water"\
"Slow shower drain"\
"Overflowing toilet"
**Do**
"Fix water problem"\
"Plumbing emergency"\
"Water not working"\
"Broken pipe"\
"Plumbing issue"
**Don't**
### Give users the information they need to make an informed decision
When a label doesn't provide enough context, use descriptions to give users the relevant details they need to decide.
Don't add descriptions when unneeded or solely to match other inputs.
Use sentence case, and only include period if more than one sentence is used.
Follow the inline help content guidelines.
```tsx lines theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Radio } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
**Don't**
## Keyboard Interaction
Navigate the Radio using standard keyboard controls.
| Key | Interaction |
| ---------- | --------------------------- |
| Arrow keys | Navigate and selects Radios |
### Accessibility
* Include Radio buttons in a Radio Group with multiple mutually exclusive options.
* Provide a visible label for each Radio button.
* When a Radio button has an error, include helper text to describe the error.
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).
