Radio Group

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { RadioGroup, RadioGroupItem } from "@line/abc-def-react/radio-group";

<script setup lang="ts">
import { RadioGroup, RadioGroupItem } from "@line/abc-def-vue/radio-group";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { RadioGroup, RadioGroupItem } from "@line/abc-def-react/radio-group";
import { Label } from "@line/abc-def-react/label";

export function Example() {
  return (
    <RadioGroup defaultValue="react">
      <div className="flex items-center gap-2">
        <RadioGroupItem id="react" value="react" />
        <Label htmlFor="react">React</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem id="vue" value="vue" />
        <Label htmlFor="vue">Vue</Label>
      </div>
    </RadioGroup>
  );
}

<script setup lang="ts">
import { Field, FieldLabel } from "@line/abc-def-vue/field";
import { RadioGroup, RadioGroupItem } from "@line/abc-def-vue/radio-group";
</script>

<template>
  <RadioGroup default-value="react">
    <Field orientation="horizontal">
      <RadioGroupItem id="react" value="react" />
      <FieldLabel for="react">React</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem id="vue" value="vue" />
      <FieldLabel for="vue">Vue</FieldLabel>
    </Field>
  </RadioGroup>
</template>

Component tokens

Composition exports

Usage notes

• Use when exactly one option is selected.
• Pair every item with a visible label.
• Related component tokens use the `radio-group` token group in `@line/abc-def-styles/css`.