---
title: "Radio group"
description: "One choice among a few options, all in view. Radio for short options, RadioCard for options that need a sentence of explanation."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio group

## Radios

```tsx
import { Radio, RadioGroup } from '@arbol-ai/ui';

<RadioGroup defaultValue="whatsapp" label="Reminder channel">
  <Radio value="whatsapp">WhatsApp</Radio>
  <Radio description="Plain text, without read receipts." value="sms">
    SMS
  </Radio>
  <Radio value="voice">Phone call</Radio>
</RadioGroup>
```

## Cards

The whole card selects; in a row, the cards share the width.

```tsx
import { HeadsetIcon, RobotIcon } from '@phosphor-icons/react';
import { RadioCard, RadioGroup } from '@arbol-ai/ui';

<RadioGroup defaultValue="agent" label="Who answers new conversations" orientation="horizontal">
  <RadioCard description="Answers 24/7 and books on your calendar." value="agent">
    <RobotIcon aria-hidden className="size-4" /> The agent
  </RadioCard>
  <RadioCard description="Your team answers during office hours." value="team">
    <HeadsetIcon aria-hidden className="size-4" /> Your team
  </RadioCard>
</RadioGroup>
```

## Required

```tsx
import { Radio, RadioGroup } from '@arbol-ai/ui';

<RadioGroup
  errorMessage="Choose where to send the report."
  isInvalid
  isRequired
  label="Send the daily report to"
  orientation="horizontal"
>
  <Radio value="email">Email</Radio>
  <Radio value="whatsapp">WhatsApp</Radio>
</RadioGroup>
```

## Source

The examples above are [`src/components/radio-group/radio-group.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/radio-group/radio-group.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/radio-group/index.mdx