Vergil

Appearance

RadioGroup ​

Basic Usage ​

vue
<script setup>
import { RadioGroup, Radio } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'

const vehicle = useModel('')
const armor = useModel('mark-iv')

const vehicleOptions = {
    mongoose: 'Mongoose',
    warthog: 'Warthog',
    scorpion: 'Scorpion'
}
</script>

<template>
    <!-- options prop: Radio value-label pairs -->
    <RadioGroup v-model="vehicle" :options="vehicleOptions" name="vehicles" label="Vehicles"/>

    <!-- default slot -->
    <RadioGroup v-model="armor" name="armor" label="Armor">
        <Radio value="mark-iv" label="Mark IV"/>
        <Radio value="mark-v" label="Mark V" theme="user"/>
        <Radio value="mark-vi" label="Mark VI"/>
    </RadioGroup>
</template>

Props ​

Props that affect a Radio component's appereance are passed to (and, therefore, shared between) all underlying RadioGroup's Radio components.

Options 
options: (string | [string, string])[] | Record<string, string | [string, string]> = []
 ​

The options prop is an array or (plain) object that provides the required data to define each option's value, label, and description, which correspond to the value, label, and description props of each underlying Radio components.

Options' values, labels, and descriptions can be automatically inferred from the values of options — each denoted as option — if they're either a string or an array of strings.

The following table summarizes how option's label and description are inferred from an option.

Type of optionlabeldescription
stringoptionundefined
string[]option[0]option[1]

The following table summarizes how an option's value is inferred depending on the type of options.

Type of optionsvalue
ArraySame as label
objectThe option's key
Example. Options Array ​
vue
<script setup>
const options = [
    'Option 1',
    ['Option 2', 'Description 2']
]
</script>

<template>
    <RadioGroup v-model="checked" :options/>
</template>
checked.value === ''
Example. Options Object ​
vue
<script setup>
const options = {
    value1: 'Option 1',
    value2: ['Option 2', 'Description 2']
}
</script>

<template>
    <RadioGroup v-model="checked" :options/>
</template>
checked.value === ''

TIP

The RadioGroup default slot may be used instead to directly pass Radio components. In such case, the options prop is ignored and RadioGroup group-level props may be overwritten on each Radio component.

Option's attributes 
option-[value|label|description]: (string | Function)
 ​

The option-value, option-label, and option-description props allow to specify custom options' values, labels, and descriptions.

As strings, these props represent an object key. If an option is an object, the resulting value/label/description is obtained by accessing that object with the provided key.

vue
<script setup>
const options = [{
    id: '123',
    name: 'Abc Def',
    email: 'abc.def@vergil.com'
},{
    id: '456',
    name: 'Uvw Xyz',
    email: 'uvw.xyz@vergil.com'
}]
</script>

<template>
    <RadioGroup v-model="checked" :options
        option-value="id"    
        option-label="name"
        option-description="email"
    />
</template>
checked.value === ''

As functions, these props are called for each option, receive the option and its key (index for arrays) as arguments, and their return value becomes the resulting value/label/description.

vue
<script setup>
const options = [{
    id: '123',
    name: 'Abc Def',
    email: 'abc.def@vergil.com'
},{
    id: '456',
    name: 'Uvw Xyz',
    email: 'uvw.xyz@vergil.com'
}]
</script>

<template>
    <RadioGroup v-model="checked" :options
        :option-value="option => kebabCase(option.name)"    
        :option-label="option => option.name.split(' ')[0]"
        :option-description="option => `@@mail@@ ${option.email}`"
    />
</template>
checked.value === ''

The following functions are the default values for the option-value, option-label, and option-description props.

js
function defaultOptionValue(option, key) {
    return typeof key === 'number'
        ? Array.isArray(option) ? option[0] : option
        : key
}
function defaultOptionLabel(option) {
    return Array.isArray(option) ? option[0] : option
}
function defaultOptionDescription {
    return Array.isArray(option) ? option[1] : undefined
}

Options' attributes 
options-attributes: Record<string, unknown> | ((...Args) => Record<string, unknown>)
 ​

As an object, options-attributes contains additional attributes to apply to all underlying Radio components.

template
<RadioGroup
    :options
    :options-attributes="{
        'data-custom': 'data'
    }"
/>

As a function, options-attributes is called for each option, receives the computed Radio component's key, value, label, and description, and its return object becomes the additional attributes.

template
<RadioGroup
    :options
    :options-attributes="(key,value,label,description) => ({
        /* additional attributes */
    })
/>

Variant 
variant: ('classic' | 'card' | 'toggle' | 'list') = 'classic'
 ​

Show symbol 
show-symbol: boolean
 ​

Direction 
direction: ('column' | 'row') = 'column'
 ​

Name 
name: string
 ​

The name prop is used as the name attribute for all the RadioGroup's Radio members.

vue
<RadioGroup name="group-name"/>

Theme 
theme: theme = 'brand'
 ​

Size 
size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'
 ​

Radius 
radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'full'
 ​

Spacing 
spacing: ('compact' | 'expanded') = ''
 ​

Disabled 
disabled: boolean
 ​

Elements ​

elementtagdescription
options<div.toggle-group-wrapper>Wrapper of underlying Radio components.

Anatomy ​

<div.form-field.radio-group/>

<div.form-field-label-wrapper/>

<label.form-field-label/>

<span.form-field-hint/>

<p.form-field-details.form-field-description/>

<div.toggle-group-wrapper/>

<slot name="default"/>

<Radio v-for="(text,value) in options"/>

<p.form-field-details.form-field-help/>

API Reference ​

Props ​

proptypedefault
valuestring''
namestring
options(string | [string, string])[] | Record<string, string | [string, string]>[]
optionValuestring | ((option: unknown, key: string | number) => string)
optionLabelstring | ((option: unknown, key: string | number) => string)
optionDescriptionstring | ((option: unknown, key: string | number) => string)
optionsAttributesRecord<string, unknown> | ((key: string | number, value: string, label: string, description: string) => Record<string, unknown>)
variant'classic' | 'card' | 'list' | 'toggle''classic'
showSymbolboolean
direction'column' | 'row''column'
disabledboolean
labelstring
hintstring
descriptionstring
helpstring
showErrrosboolean
descendantboolean
theme'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral''brand'
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
radius'none' | 'sm' | 'md' | 'lg' | 'full''full'
spacing'' | 'compact' | 'extended'''
validatorFunction
eagerValidationboolean
elementsobject

Configuration options ​

The RadioGroup is configured through the Radio configuration options.