RadioGroupField — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download radio-group-field -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { RadioGroup } from "@/components/ui/radio-group";
import { RadioGroupField } from "@/components/ui/radio-group-field";
import { Label } from "@/components/ui/label";
<RadioGroup defaultValue="comfortable">
  <RadioGroupField position="prefix" value="default" disabled={false} className="">
    <Label htmlFor="r1">Default</Label>
  </RadioGroupField>
  <RadioGroupField
    value="comfortable"
    position="prefix"
    disabled={false}
  >
    <Label htmlFor="r2">Comfortable</Label>
  </RadioGroupField>
  <RadioGroupField
    value="compact"
    position="prefix"
    disabled={false}
  >
    <Label htmlFor="r3">Compact</Label>
  </RadioGroupField>
</RadioGroup>;

Behavior

Generate a stable id when id is omitted.
Selection state is owned by the parent RadioGroup.

Examples

Default

import { RadioGroup } from "@/components/ui/radio-group";
import { RadioGroupField } from "@/components/ui/radio-group-field";
import { Label } from "@/components/ui/label";
<RadioGroup defaultValue="comfortable">
  <RadioGroupField position="prefix" value="default" disabled={false} className="">
    <Label htmlFor="r1">Default</Label>
  </RadioGroupField>
  <RadioGroupField
    value="comfortable"
    position="prefix"
    disabled={false}
  >
    <Label htmlFor="r2">Comfortable</Label>
  </RadioGroupField>
  <RadioGroupField
    value="compact"
    position="prefix"
    disabled={false}
  >
    <Label htmlFor="r3">Compact</Label>
  </RadioGroupField>
</RadioGroup>;

Suffix

import { RadioGroup } from "@/components/ui/radio-group";
import { RadioGroupField } from "@/components/ui/radio-group-field";
import { Label } from "@/components/ui/label";
<RadioGroup defaultValue="comfortable">
  <RadioGroupField position="suffix" value="default" disabled={false} className="">
    <Label htmlFor="r1">Default</Label>
  </RadioGroupField>
  <RadioGroupField
    value="comfortable"
    position="suffix"
    disabled={false}
  >
    <Label htmlFor="r2">Comfortable</Label>
  </RadioGroupField>
  <RadioGroupField
    value="compact"
    position="suffix"
    disabled={false}
  >
    <Label htmlFor="r3">Compact</Label>
  </RadioGroupField>
</RadioGroup>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default
`disabled`	`boolean`	`—`
`position`	`"prefix" \| "suffix"`	`—`
`value`	`string`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.