Radio Group

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/radio-group.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/radio-group.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/radio-group.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/radio-group.json
    

Usage

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

<template>
  <RadioGroup.Root>
    <!-- … -->
  </RadioGroup.Root>
</template>
    

Composition

      Copy
      RadioGroup.Root
├── RadioGroup.Label
├── RadioGroup.Indicator
└── RadioGroup.Item
    ├── RadioGroup.ItemControl
    ├── RadioGroup.ItemText
    └── RadioGroup.ItemHiddenInput
    

Examples

Initial Value

To set the radio group's initial value, set the defaultValue prop to the value of the radio item to be selected by default.

Controlled

For a controlled Radio Group, the state is managed using the value prop, and updates when the onValueChange event handler is called:

Root Provider

An alternative way to control the radio group is to use the RootProvider component and the useRadioGroup hook. This way you can access the state and methods from outside the component.

Disabled

To make a radio group disabled, set the disabled prop to true.

API

See Ark UI Radio Group docs for full props and examples.