Radio
Basic Usage
vehicles.value === ''<script setup>
import { Radio } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'
const vehicles = useModel('')
</script>
<template>
<Radio v-model="vehicles" name="vehicles" value="mongoose" label="Mongoose"/>
<Radio v-model="vehicles" name="vehicles" value="warthog" label="Warthog"/>
<Radio v-model="vehicles" name="vehicles" value="scorpion" label="Scorpion"/>
</template>Attributes
All attributes (except class) passed to Radio are applied to its underlying <input type="radio"> element. Just like with the native form field element, it is important to set the name and value attributes.
TIP
Always provide name to improve (keyboard) usability and accessibility.
Props
Label label: string
MiniMarkup
The label slot may be use instead. The slot content overrides the label prop.
<Radio name="armor" value="mark-iv" label="Mark IV"/>
<Radio name="armor" value="mark-v" label="Mark V"/>
<Radio name="armor" value="mark-vi" label="Mark VI"/>Description description: string
MiniMarkup
The description slot may be use instead. The slot content overrides the description prop.
<Radio label="Label" description="Description"/>Variant variant: ('classic' | 'card' | 'list' | 'toggle') = 'classic'
Show symbol show-symbol: boolean
Radio radius radio-radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'full'
Theme theme: theme = 'brand'
Size size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'
Radius radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'md'
Spacing spacing: ('compact' | 'expanded') = ''
Disabled disabled: boolean
Elements
| element | tag | description |
|---|---|---|
input | <input[type="radio"]> | Radio's underlying input element. |
Anatomy
<label.radio/>
<input[type="radio"]/>
<span.toggle-button/>
<svg.toggle-radio/>
<p.toggle-label/>
<slot name="default"/>
<p.toggle-description/>
<slot name="description"/>
API Reference
Props
| prop | type | default |
|---|---|---|
checked | boolean | |
value | string | 'on' |
name | string | |
label | string | |
description | string | |
variant | 'classic' | 'card' | 'list' | 'toggle' | 'classic' |
showSymbol | boolean | |
radioRadius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'full' |
disabled | boolean | |
descendant | boolean | |
theme | 'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral' | 'brand' |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' |
spacing | '' | 'compact' | 'extended' | '' |
validator | Function | |
eagerValidation | boolean | |
elements | object |
Configuration options
Radio's configuration options allow to overwrite some Radio props' default values and may be overwritten under the radio root-level configuration option.
radio.<option> | type | default | global |
|---|---|---|---|
variant | 'classic' | 'card' | 'list' | 'toggle' | 'classic' | |
radioRadius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'full' | |
theme | theme | ✅ | |
size | size | ✅ | |
radius | radius | ✅ | |
spacing | spacing | ✅ |