VvRadio Component

The VvRadio Component provides a set of props and config module based settings to make a validation ready set of radio input elements for applications with an extremely DRY implementation of atomic classes.

Import

To import a VvRadio Component installed by the vueventus CLI or vv-update CLI:

javascript

// ./src/components/SomeComponent.vue
import VvRadio from './vv/inputs/VvRadio.vue'

TIP

CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.

Alternatively, you can install the raw library VvRadio Component with:

javascript

import { VvRadio } from '@obewds/vueventus'

TIP

Importing raw VueVentus library components will still apply your ./src/app.vv.ts settings automatically through the Vue provide() and inject() pattern. All raw VueVentus library components automatically check for a provided "vv" keyed object with a ConfigVv type interface.

CLI or Raw?

The main difference between raw library components and CLI installed components, is that you have no control over component defaults with raw library components. This is less flexible than using CLI installed components, because control of component defaults can greatly reduce the number of props a dev has to type for component instances, which reduces app code.

Meanwhile, the control CLI installed components provide through customizable defaults, opens up to a global level (styling management system) control for default component state characteristic values (particularly powerful with color and proportional size characteristics).

Emits: update:modelValue

Emits: update:modelValue
Emit Value Type: Boolean

The VvRadio Component emits a standard Vue key of update:modelValue upon the change event of the component's generated radio input's checked attribute.

TIP

This means when using the VvRadio Component downstream in an end application, you can safely use Vue's v-model binding to two-way bind a reactive value through your downstream component and into (and back from) the VvRadio Component instance.

Example

html

<!-- ./src/components/SomeComponent.vue -->

<script setup lang="ts">

    import { ref } from 'vue'
    import { VvRadio, VvEl } from '@obewds/vueventus'

    const selections = ref([
        { value: 'dawn', label: 'Dawn Light' },
        { value: 'dusk', label: 'Dusk Light' },
        { value: 'moonlight', label: 'Moonlight' },
        { value: 'sunlight', label: 'Sunlight' },
    ])

    const selected = ref(selections.value[0])

</script>

<template>

    <div class="flex flex-col space-y-1">

        <div
            v-for="(selection, id) in selections"
            class="flex items-center gap-2"
            :key="id"
        >

            <VvRadio
                :id="'lightType-' + id"
                name="lightType"
                :value="selection.value"
                color="primary"
                @update:modelValue="(event) => event === true ? selected = selection : null"
                :checked="selection === selected"
            />

            <label :for="'lightType-' + id">
                {{ selection.label }}
            </label>

        </div>

        <VvEl text-color="primary" class="font-bold pt-1">
            {{ selected.label }}
        </VvEl>

    </div>

</template>

Result

Dawn Light

Dusk Light

Moonlight

Sunlight

Dawn Light

Some things to note about the code above:

The name attribute value is shared across the loop of VvRadio component instances to group them as radio buttons with each other
The id attribute of a VvRadio component and it's associated label element's for attribute match each other to allow interactions with the label to apply to the radio input
The value attribute of a VvRadio component is required and is used to provide the semantically correct "hard-coded" value for each radio in the group
The checked value for the VvRadio component is determined by comparing the selected object against the selection object value - where the result is passed down to VvRadio as a Boolean
The event listener for the update:modelValue event is used to trigger a function that checks if the triggered event value is true and if so, updates the reactive selected value to be the new user-selected object. If the emitted update:modelValue event is false the function returns null, and the selected value remains unchanged.
The displayed selected.label text updates reactively when the selected value is changed

Prop: checked

Type: Boolean
Default: "false"

The VvRadio Component checked prop sets the component instance checked attribute. This means when the component is initialized with the checked prop being true, then the rendered radio will display in the fully checked state.

TIP

You can also simply use the attribute checked on your VvRadio instance to render the resulting radio input element in the checked state.

Syntax

html

<div class="flex flex-col space-y-1">
    <div class="flex items-center gap-2">
        <VvRadio
            id="lightType-1"
            name="lightType"
            value="sunlight"
            :checked="true"
        />
        <label for="lightType-1">Sunlight</label>
    </div>
    <div class="flex items-center gap-2">
        <VvRadio
            id="lightType-2"
            name="lightType"
            value="moonlight"
            :checked="false"
        />
        <label for="lightType-2">Moonlight</label>
    </div>
</div>

Result

Sunlight

Moonlight

Prop: color

Type: String
Default: "default"

The VvRadio Component color prop sets the component instance color based both on the color prop and the palette prop value.

Syntax

html

<script setup lang="ts">

    import { VvRadio } from '@obewds/vueventus'

    const tw = {
        wrapper: 'w-full flex flex-col gap-2 pb-4',
        row: 'flex items-center gap-2',
    }

</script>

<!-- VvRadio color="default" example -->
<div :class="tw.wrapper">
    <div :class="tw.row">
        <VvRadio color="default" id="food-1" name="food" value="pizza" checked/>
        <label for="food-1">Pizza</label>
    </div>
    <div :class="tw.row">
        <VvRadio color="default" id="food-2" name="food" value="hamburger"/>
        <label for="food-2">Hamburger</label>
    </div>
</div>

<!-- VvRadio color="error" example -->
<div :class="tw.wrapper">
    <div :class="tw.row">
        <VvRadio color="error" id="drinks-1" name="drinks" value="water" checked/>
        <label for="drinks-1">Water</label>
    </div>
    <div :class="tw.row">
        <VvRadio color="error" id="drinks-2" name="drinks" value="juice"/>
        <label for="drinks-2">Juice</label>
    </div>
</div>

<!-- VvRadio color="primary" example -->
<div :class="tw.wrapper">
    <div :class="tw.row">
        <VvRadio color="primary" id="amPm-1" name="amPm" value="am" checked/>
        <label for="amPm-1">AM</label>
    </div>
    <div :class="tw.row">
        <VvRadio color="primary" id="amPm-2" name="amPm" value="pm"/>
        <label for="amPm-2">PM</label>
    </div>
</div>

<!-- VvRadio color="secondary" example -->
<div :class="tw.wrapper">
    <div :class="tw.row">
        <VvRadio color="secondary" id="dessert-1" name="dessert" value="iceCream" checked/>
        <label for="dessert-1">Ice Cream</label>
    </div>
    <div :class="tw.row">
        <VvRadio color="secondary" id="dessert-2" name="dessert" value="fruit"/>
        <label for="dessert-2">Fruit</label>
    </div>
</div>

<!-- VvRadio color="success" example -->
<div :class="tw.wrapper">
    <div :class="tw.row">
        <VvRadio color="success" id="apps-1" name="apps" value="salad" checked/>
        <label for="apps-1">Salad</label>
    </div>
    <div :class="tw.row">
        <VvRadio color="success" id="apps-2" name="apps" value="rolls"/>
        <label for="apps-2">Rolls</label>
    </div>
</div>

Result

Pizza

Hamburger

Water

Juice

Ice Cream

Fruit

Salad

Rolls

Typing for Downstream Component Instances

Coming Soon!

Prop: darkRadioHex

Type: String
Default: "#242426"

The VvRadio Component darkRadioHex prop sets the component checked state's radio icon color in the dark color mode state.

Syntax

html

<VvRadio
    dark-radio-hex="#00ffff"
    light-radio-hex="#00ffff"
    name="planets"
    value="earth"
    checked
/>
<VvRadio
    dark-radio-hex="#00ffff"
    light-radio-hex="#00ffff"
    name="planets"
    value="mars"
/>

Result

Prop: debug

Type: Boolean
Default: false

The VvRadio Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-radio- prefixed HTML attributes.

Syntax

html

<VvRadio :debug="true"/>

Result

Prop: lightRadioHex

Type: String
Default: "#e1e1e3"

The VvRadio Component lightRadioHex prop sets the component checked state's radio icon color in the light color mode state.

Syntax

html

<VvRadio
    dark-radio-hex="#00ffff"
    light-radio-hex="#00ffff"
    name="weather"
    value="rain"
    checked
/>
<VvRadio
    dark-radio-hex="#00ffff"
    light-radio-hex="#00ffff"
    name="weather"
    value="snow"
/>

Result

Prop: palette

Type: String
Default: "default"

The VvRadio Component palette prop sets the component instance palette based both on the color prop and the palette prop value.

Syntax

html

<div class="flex gap-3">
    <VvRadio palette="default" name="colors" value="gray" checked/>
    <VvRadio palette="default" name="colors" value="red" color="error"/>
    <VvRadio palette="default" name="colors" value="violet" color="primary"/>
    <VvRadio palette="default" name="colors" value="emerald" color="secondary"/>
    <VvRadio palette="default" name="colors" value="green" color="success"/>
</div>

Result

Typing for Downstream Component Instances

Coming Soon!

Prop: size

Type: String
Default: "md"

The VvRadio Component size prop sets the component instance size-based classes which in the context of radio inputs typically involves fixed width and height atomic classes.

Syntax

html

<div class="flex items-center gap-3">
    <VvRadio size="xs" name="sizes" value="xs"/>
    <VvRadio size="sm" name="sizes" value="sm"/>
    <VvRadio size="md" name="sizes" value="md" checked/>
    <VvRadio size="lg" name="sizes" value="lg"/>
    <VvRadio size="xl" name="sizes" value="xl"/>
    <VvRadio size="2xl" name="sizes" value="2xl"/>
</div>

Result

size prop radios with sized labels examples

Syntax

html

<div class="flex flex-col w-full space-y-2">

    <div class="flex flex-col pb-4">
        <div class="flex items-center gap-1.5">
            <VvRadio
                id="vvRadio-xs-1"
                name="vvRadio-xs"
                value="xs-1"
                color="default"
                size="xs"
                :checked="true"
            />
            <label htmlFor="vvRadio-xs-1" class="text-2xs">XS Size 1</label>
        </div>
        <div class="flex items-center gap-1.5">
            <VvRadio
                id="vvRadio-xs-2"
                name="vvRadio-xs"
                value="xs-2"
                color="default"
                size="xs"
                :checked="false"
            />
            <label htmlFor="vvRadio-xs-2" class="text-2xs">XS Size 2</label>
        </div>
    </div>

    <div class="flex flex-col space-y-0.5 pb-4">
        <div class="flex items-center gap-1.5">
            <VvRadio
                id="vvRadio-sm-1"
                name="vvRadio-sm"
                value="sm-1"
                color="default"
                size="sm"
                :checked="true"
            />
            <label htmlFor="vvRadio-sm-1" class="text-xs">SM Size 1</label>
        </div>
        <div class="flex items-center gap-1.5">
            <VvRadio
                id="vvRadio-sm-2"
                name="vvRadio-sm"
                value="sm-2"
                color="default"
                size="sm"
                :checked="false"
            />
            <label htmlFor="vvRadio-sm-2" class="text-xs">SM Size 2</label>
        </div>
    </div>

    <div class="flex flex-col space-y-2 pb-4">
        <div class="flex items-center gap-2">
            <VvRadio
                id="vvRadio-md-1"
                name="vvRadio-md"
                value="md-1"
                color="default"
                size="md"
                :checked="true"
            />
            <label htmlFor="vvRadio-md-1" class="text-md">MD Size 1</label>
        </div>
        <div class="flex items-center gap-2">
            <VvRadio
                id="vvRadio-md-2"
                name="vvRadio-md"
                value="md-2"
                color="default"
                size="md"
                :checked="false"
            />
            <label htmlFor="vvRadio-md-2" class="text-md">MD Size 2</label>
        </div>
    </div>

    <div class="flex flex-col space-y-2 pb-4">
        <div class="flex items-center gap-2.5">
            <VvRadio
                id="vvRadio-lg-1"
                name="vvRadio-lg"
                value="lg-1"
                color="default"
                size="lg"
                :checked="true"
            />
            <label htmlFor="vvRadio-lg-1" class="text-lg">LG Size 1</label>
        </div>
        <div class="flex items-center gap-2.5">
            <VvRadio
                id="vvRadio-lg-2"
                name="vvRadio-lg"
                value="lg-2"
                color="default"
                size="lg"
                :checked="false"
            />
            <label htmlFor="vvRadio-lg-2" class="text-lg">LG Size 2</label>
        </div>
    </div>

    <div class="flex flex-col space-y-2.5 pb-4">
        <div class="flex items-center gap-3">
            <VvRadio
                id="vvRadio-xl-1"
                name="vvRadio-xl"
                value="xl-1"
                color="default"
                size="xl"
                :checked="true"
            />
            <label htmlFor="vvRadio-xl-1" class="text-xl">XL Size 1</label>
        </div>
        <div class="flex items-center gap-3">
            <VvRadio
                id="vvRadio-xl-2"
                name="vvRadio-xl"
                value="xl-2"
                color="default"
                size="xl"
                :checked="false"
            />
            <label htmlFor="vvRadio-xl-2" class="text-xl">XL Size 2</label>
        </div>
    </div>

    <div class="flex flex-col space-y-2.5 pb-4">
        <div class="flex items-center gap-3">
            <VvRadio
                id="vvRadio-2xl-1"
                name="vvRadio-2xl"
                value="2xl-1"
                color="default"
                size="2xl"
                :checked="true"
            />
            <label htmlFor="vvRadio-2xl-1" class="text-2xl">2XL Size 1</label>
        </div>
        <div class="flex items-center gap-3">
            <VvRadio
                id="vvRadio-2xl-2"
                name="vvRadio-2xl"
                value="2xl-2"
                color="default"
                size="2xl"
                :checked="false"
            />
            <label htmlFor="vvRadio-2xl-2" class="text-2xl">2XL Size 2</label>
        </div>
    </div>

</div>

Result

Typing for Downstream Component Instances

Coming Soon!

Slot: None

NO SLOT AVAILABLE

The VvRadio Component does not have Vue slot option, because an <input> element is a HTML Empty Element, which cannot have children or child nodes.

VvRadio Component ​

Import ​

Emits: update:modelValue ​

Example ​

Result ​

Prop: checked ​

Syntax ​

Result ​

Prop: color ​

Syntax ​

Result ​

Typing for Downstream Component Instances ​

Prop: darkRadioHex ​

Syntax ​

Result ​

Prop: debug ​

Syntax ​

Result ​

Prop: lightRadioHex ​

Syntax ​

Result ​

Prop: palette ​

Syntax ​

Result ​

Typing for Downstream Component Instances ​

Prop: size ​

Syntax ​

Result ​

Typing for Downstream Component Instances ​

Slot: None ​

VvRadio Component

Import

Emits: update:modelValue

Example

Result

Prop: checked

Syntax

Result

Prop: color

Syntax

Result

Typing for Downstream Component Instances

Prop: darkRadioHex

Syntax

Result

Prop: debug

Syntax

Result

Prop: lightRadioHex

Syntax

Result

Prop: palette

Syntax

Result

Typing for Downstream Component Instances

Prop: size

Syntax

Result

Typing for Downstream Component Instances

Slot: None