Labeldescription*

Helper text

Value 1

Value 2

Value 3

Value 4

Usage

<script setup lang="ts">
import { Label } from "wedges-vue";
import { RadioGroup, RadioGroupItem } from "wedges-group";
</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	'ltr' | 'rtl'
disabled	boolean	false
for	string
helperText	string
id	string
label	string
loop	boolean	false
modelValue	string
name	string
orientation	'horizontal' | 'vertical'
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