Default

Comfortable

Compact

Installation

pnpm dlx kliping@latest add radio-group

Usage

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

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

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/radio-group/radio-group.vue components/ui/radio-group/radio-group-item.vue components/ui/radio-group/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<RadioGroup>
  <RadioGroupItem />
</RadioGroup>

API Reference

RadioGroup

Prop	Type	Default	Description
modelValue?	AcceptableValue	—	The controlled value of the radio item to check. Can be binded as v-model.
defaultValue?	AcceptableValue	—	The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
disabled?	boolean	—	When true, prevents the user from interacting with radio items.
orientation?	DataOrientation	—	The orientation of the component.
dir?	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
loop?	boolean	—	When true, keyboard navigation will loop from last item to first, and vice versa.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.

Event	Payload	Description
@update:modelValue	[payload: AcceptableValue]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: AcceptableValue | undefined; }

Data attribute	Value
[data-slot]	"radio-group"

RadioGroupItem

Prop	Type	Default	Description
disabled?	boolean	—	When true, prevents the user from interacting with the radio item.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
value?	AcceptableValue	—	The value given as data when submitted with a name.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.
id?	string	—	The id of the rendered element.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"radio-group-item"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI RadioGroup yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Tab	Moves focus to either the checked radio item or the first radio item in the group.
Space	When focus is on an unchecked radio item, checks it.
ArrowDown	Moves focus and checks the next radio item in the group.
ArrowRight	Moves focus and checks the next radio item in the group.
ArrowUp	Moves focus to the previous radio item in the group.
ArrowLeft	Moves focus to the previous radio item in the group.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --destructive, --input, --primary, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.