RadioGroup

Single-choice picker built on React Aria. The group owns the value; each item contributes a value string.

import { RadioGroup } from "@pockets-ui/components"

Anatomy

Part	Role
`RadioGroup.Root`	Owns the value (`value`/`defaultValue`, `onChange`).
`RadioGroup.Label`	The group's visible label.
`RadioGroup.Item`	One option. Requires `value`; children are its label.

Basic

Favorite animalCatDogDragon

Code

import { RadioGroup } from "@pockets-ui/components"

export default function RadioGroupBasic() {
  return (
    <RadioGroup.Root>
      <RadioGroup.Label>Favorite animal</RadioGroup.Label>
      <RadioGroup.Item value="cat">Cat</RadioGroup.Item>
      <RadioGroup.Item value="dog">Dog</RadioGroup.Item>
      <RadioGroup.Item value="dragon">Dragon</RadioGroup.Item>
    </RadioGroup.Root>
  )
}

Preselected value

ShippingStandard (5–7 days)Expedited (2–3 days)Overnight

Code

import { RadioGroup } from "@pockets-ui/components"

export default function RadioGroupPreselected() {
  return (
    <RadioGroup.Root defaultValue="expedited">
      <RadioGroup.Label>Shipping</RadioGroup.Label>
      <RadioGroup.Item value="standard">Standard (5–7 days)</RadioGroup.Item>
      <RadioGroup.Item value="expedited">Expedited (2–3 days)</RadioGroup.Item>
      <RadioGroup.Item value="overnight">Overnight</RadioGroup.Item>
    </RadioGroup.Root>
  )
}

Horizontal

SizeSmallMediumLarge

Code

import { RadioGroup } from "@pockets-ui/components"

export default function RadioGroupHorizontal() {
  return (
    <RadioGroup.Root orientation="horizontal" defaultValue="md">
      <RadioGroup.Label>Size</RadioGroup.Label>
      <RadioGroup.Item value="sm">Small</RadioGroup.Item>
      <RadioGroup.Item value="md">Medium</RadioGroup.Item>
      <RadioGroup.Item value="lg">Large</RadioGroup.Item>
    </RadioGroup.Root>
  )
}

Disabled

Disable the whole group from the root, or a single option from the item — note that a disabled item can still be the selected one.

Code

import { RadioGroup } from "@pockets-ui/components"

export default function RadioGroupDisabled() {
  return (
    <>
      {/* isDisabled on the root disables every option. */}
      <RadioGroup.Root isDisabled defaultValue="pro">
        <RadioGroup.Label>Plan</RadioGroup.Label>
        <RadioGroup.Item value="free">Free</RadioGroup.Item>
        <RadioGroup.Item value="pro">Pro</RadioGroup.Item>
      </RadioGroup.Root>

      {/* isDisabled on an item disables just that one. */}
      <RadioGroup.Root>
        <RadioGroup.Label>Tier</RadioGroup.Label>
        <RadioGroup.Item value="free">Free</RadioGroup.Item>
        <RadioGroup.Item value="pro">Pro</RadioGroup.Item>
        <RadioGroup.Item value="enterprise" isDisabled>
          Enterprise (contact sales)
        </RadioGroup.Item>
      </RadioGroup.Root>
    </>
  )
}