RadioGroup

Installation

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

pnpm exec frontfriend download radio-group -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { RadioGroup } from "@/components/ui/radio-group";
import { RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";

const Component = RadioGroup;

const args = {
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <RadioGroup default-value="comfortable" v-bind="args"
    ><div class="flex items-center space-x-2">
      <RadioGroupItem value="default" id="r1" /><Label for="r1">Default</Label>
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem value="comfortable" id="r2" /><Label for="r2"
        >Comfortable</Label
      >
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem value="compact" id="r3" /><Label for="r3">Compact</Label>
    </div></RadioGroup
  >
</template>

Examples

Default

<script setup lang="ts">
import { RadioGroup } from "@/components/ui/radio-group";
import { RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";

const Component = RadioGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <RadioGroup default-value="comfortable" v-bind="args"
    ><div class="flex items-center space-x-2">
      <RadioGroupItem value="default" id="r1" /><Label for="r1">Default</Label>
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem value="comfortable" id="r2" /><Label for="r2"
        >Comfortable</Label
      >
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem value="compact" id="r3" /><Label for="r3">Compact</Label>
    </div></RadioGroup
  >
</template>

Disabled

<script setup lang="ts">
import { RadioGroup } from "@/components/ui/radio-group";
import { RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";

const Component = RadioGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <RadioGroup default-value="comfortable" disabled
    ><div class="flex items-center space-x-2">
      <RadioGroupItem value="default" id="d1" /><Label for="d1">Default</Label>
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem value="comfortable" id="d2" /><Label for="d2"
        >Comfortable</Label
      >
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem value="compact" id="d3" /><Label for="d3">Compact</Label>
    </div></RadioGroup
  >
</template>

Form

<script setup lang="ts">
import { Label } from "@/components/ui/label";
import { RadioGroup } from "@/components/ui/radio-group";
import { RadioGroupItem } from "@/components/ui/radio-group";

const Component = RadioGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="grid gap-3">
    <Label>Notify me about...</Label
    ><RadioGroup default-value="all"
      ><div class="flex items-center space-x-2">
        <RadioGroupItem value="all" id="f1" /><Label for="f1"
          >All new messages</Label
        >
      </div>
      <div class="flex items-center space-x-2">
        <RadioGroupItem value="mentions" id="f2" /><Label for="f2"
          >Direct messages and mentions</Label
        >
      </div>
      <div class="flex items-center space-x-2">
        <RadioGroupItem value="none" id="f3" /><Label for="f3">Nothing</Label>
      </div></RadioGroup
    >
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

RadioGroup

RadioGroupItem

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