Radio group

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>

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>

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>