RadioGroupField

Installation

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

pnpm exec frontfriend download radio-group-field -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 { RadioGroupField } from "@/components/ui/radio-group-field";

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

<template>
  <RadioGroup default-value="option"
    ><RadioGroupField
      value="option"
      :position="args.position"
      :disabled="args.disabled"
      >Option</RadioGroupField
    ></RadioGroup
  >
</template>

Behavior

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

Examples

Default

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

const args = {

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

<template>
  <RadioGroup default-value="default"
    ><RadioGroupField value="default">Default</RadioGroupField></RadioGroup
  >
</template>

Suffix

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

const args = {

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

<template>
  <RadioGroup default-value="option"
    ><RadioGroupField value="option" position="suffix"
      >Option</RadioGroupField
    ></RadioGroup
  >
</template>

API reference

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

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