Radio group: Horizontal

Cards can sit in a row or any grid. The ring follows them wherever they are.

SMLXL

import {
  RadioGroup,
  RadioGroupCard,
  RadioGroupCardTitle,
} from "@/components/ui/radio-group"

const sizes = ["S", "M", "L", "XL"]

export function RadioGroupHorizontal() {
  return (
    <RadioGroup
      variant="card"
      aria-label="Size"
      defaultValue="M"
      className="w-full max-w-sm grid-cols-2 sm:grid-cols-4"
    >
      {sizes.map((size) => (
        <RadioGroupCard key={size} value={size}>
          <RadioGroupCardTitle>{size}</RadioGroupCardTitle>
        </RadioGroupCard>
      ))}
    </RadioGroup>
  )
}

Add this example

This adds the example as components/examples/radio-group/horizontal.tsx, together with the Radio group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/radio-group-horizontal.json

To add only the component, follow the Radio group installation.

Props in this example

The Radio group props this example sets, from the API reference.

RadioGroup

Prop	Type	Default
`variant`card adds the sliding selection ring.	`"default" \| "card"`	`"default"`
`defaultValue`	`Value`	`–`

RadioGroupCard

Prop	Type	Default
`value`	`Value`	`–`

Every prop is in the Radio group API reference.

More Radio group examples

See them all, with keyboard support and accessibility notes, on the Radio group page.