Radio

A form control component that allows users to select exactly one option from a set, with multiple visual variants and comprehensive group functionality.

Import

``tsx
import { Radio, RadioGroup } from "@choice-ui/react"
`

Features

- Multiple visual variants (default, accent, outline)
- Support for disabled and focused states
- Two label approaches: simple string children or explicit Radio.Label for complex content
- Controlled usage for reliable state management
- Group functionality via RadioGroup component with two usage patterns
- Proper keyboard navigation (arrow keys within groups)
- Screen reader accessibility with proper ARIA attributes
- Individual and group-level disabled options

Usage

$3

`tsx
import { useState } from "react"

const [selected, setSelected] = useState(false)

value={selected}
onChange={setSelected}
>
Option Label

`

$3

`tsx
const [selections, setSelections] = useState({
default: false,
accent: false,
outline: false,
})

<>
value={selections.default}
onChange={(value) => setSelections({ ...selections, default: value })}
>
Default

value={selections.accent}
onChange={(value) => setSelections({ ...selections, accent: value })}
variant="accent"
>
Accent

value={selections.outline}
onChange={(value) => setSelections({ ...selections, outline: value })}
variant="outline"
>
Outline


`

$3

`tsx
<>
value={false}
onChange={() => {}}
>
Rest

value={false}
onChange={() => {}}
focused
>
Focused

value={false}
onChange={() => {}}
disabled
>
Disabled


`

$3

`tsx
const [simple, setSimple] = useState(false)
const [complex, setComplex] = useState(false)

<>
{/ Simple string label (auto-wrapped) /}

Simple text label


{/ Explicit Radio.Label for complex content /}


Complex label with{" "}
formatting



`

$3

`tsx
const [selected, setSelected] = useState("option1")

const options = [
{ value: "option1", label: "First Option" },
{ value: "option2", label: "Second Option" },
{ value: "option3", label: "Third Option" },
]

options={options}
value={selected}
onChange={setSelected}
/>
`

$3

`tsx
const [selected, setSelected] = useState("choice1")

value={selected}
onChange={setSelected}
>

First Choice


Second Choice


Third Choice


`

$3

`tsx
const [variant, setVariant] = useState("default")

variant={variant as "default" | "accent" | "outline"}
value={variant}
onChange={setVariant}
>
Default
Accent
Outline

`

$3

`tsx
// Using options prop
const optionsWithDisabled = [
{ value: "available1", label: "Available Option", disabled: false },
{ value: "disabled1", label: "Disabled Option", disabled: true },
{ value: "available2", label: "Another Available", disabled: false },
]

const [selected1, setSelected1] = useState("available1")

options={optionsWithDisabled}
value={selected1}
onChange={setSelected1}
/>

// Using RadioGroup.Item with individual disabled control
const [selected2, setSelected2] = useState("custom1")

value={selected2}
onChange={setSelected2}
>
Available Choice
Disabled Choice
Another Available

`

Props

$3

`ts
interface RadioProps extends Omit, "value" | "onChange"> {
/* Radio content - string is auto-wrapped with Radio.Label /
children?: ReactNode

/* Additional CSS class names /
className?: string

/* Whether the radio appears focused (for keyboard navigation) /
focused?: boolean

/* Callback fired when radio value changes /
onChange: (value: boolean) => void

/* Current radio value /
value: boolean

/* Visual style variant /
variant?: "default" | "accent" | "outline"
}
`

$3

`ts
interface RadioGroupProps {
/* Additional CSS class names /
className?: string

/* Radio group content (RadioGroup.Item components) /
children?: ReactNode

/* Array of option objects (alternative to children) /
options?: Array<{
value: string
label: string
disabled?: boolean
}>

/* Callback fired when selection changes /
onChange: (value: string) => void

/* Current selected value /
value: string

/* Visual variant applied to all radios in the group /
variant?: "default" | "accent" | "outline"
}

interface RadioGroupItemProps {
/* Radio content /
children: ReactNode

/* Whether this option is disabled /
disabled?: boolean

/* Option value /
value: string
}
`

- Defaults:
- variant: "default"
- focused: false
- disabled: false (inherited from native prop)

- Accessibility:
- Uses proper role="radio" and aria-checked attributes
- Keyboard navigation with arrow keys in RadioGroups
- Proper focus management and visible focus states
- Label association for screen readers
- Group semantics with fieldset/legend pattern in RadioGroup

Styling

- Components use Tailwind CSS via tailwind-variants in shared checkbox/tv.ts.
- Customize using the className prop; classes are merged with internal classes.
- Radio uses the checkbox TV with type: "radio" for rounded appearance.
- Variants affect fill color, border, and focus states.

Best practices

- Use RadioGroup for related options that require exactly one selection
- Provide clear, concise labels for each option
- Always show all available options (unlike dropdowns)
- Use appropriate variants based on visual hierarchy and importance
- For simple labels, use string children; for complex content, use Radio.Label
- Consider disabled options when choices are conditionally unavailable
- Ensure at least one option remains selectable in groups
- Provide feedback about why options might be disabled

Examples

$3

`tsx
const [theme, setTheme] = useState("light")
const [notifications, setNotifications] = useState("email")

`tsx
const [paymentMethod, setPaymentMethod] = useState("card")

`tsx
const [answer, setAnswer] = useState("")

- Radio buttons enforce single selection within a group (use Checkbox for multiple selections)
- String children are automatically wrapped with Radio.Label for consistent styling
- RadioGroup manages state and provides proper keyboard navigation between options
- Use the options prop for simple cases, RadioGroup.Item` children for complex layouts
- Disabled options maintain visual presence but prevent interaction
- The component follows native radio button behavior with enhanced styling and accessibility
- Focus management ensures proper keyboard navigation within groups