Labeldescription*

Helper text

Value 1

Value 2

Value 3

Value 4

Usage

<script setup lang="ts">
import { RadioGroup, RadioGroupItem } from "wedges-group";
import { Label } from "wedges-vue";
</script>

<template>
  <RadioGroup default-value="option-one">
    <div class="flex items-center space-x-2">
      <RadioGroupItem id="option-one" value="option-one" />
      <Label for="option-one">Option One</Label>
    </div>
    <div class="flex items-center space-x-2">
      <RadioGroupItem id="option-two" value="option-two" />
      <Label for="option-two">Option Two</Label>
    </div>
  </RadioGroup>
</template>

API Reference

Props

Prop	Type	Default
ariaInvalid	boolean	false
as	AsTag | Component	'div'
asChild	boolean	false
defaultValue	string
description	string
dir	Direction
disabled	boolean	false
for	string
helperText	string
id	string
label	string
loop	boolean	false
modelValue	string
name	string
orientation	DataOrientation
required	boolean	false
tooltip	string

Emit	Description
update:modelValue

Data Attribute	Value
[data-disabled]	Present when disabled

RadioGroupItem

An item in the group that can be checked. An input element will also be rendered when used within a form to ensure events propagate correctly.

Prop	Type	Default
ariaInvalid	boolean	false
as	AsTag | Component	'div'
asChild	boolean	false
disabled	boolean	false
helperText	string
id	string
label	string
name	string
required	boolean	false
value	string

Examples

Vertical(description)*

Helper text

Option 1

Option 2

Option 3

Option 4

Helper text

Horizontal(disabled)

Helper text

Option 1

Option 2

Option 3