Flux

Radio ​

A radio represents a single option within a Radio group. It carries a value; selecting it updates the group's v-model to that value. A radio can render a plain label or fully custom content through its default slot.

WARNING

This component is best used within a Radio group.

Props

value: string | number | boolean
The value of the radio, bound to the radio group's model.

label?: string
The label of the radio.

disabled?: boolean
If the radio is disabled.

Slots

default
The label content of the radio. Falls back to the label prop.

Examples ​

Custom content

A radio with custom label content.

<template>
    <Preview>
        <FluxFormRadioGroup v-model="value">
            <FluxFormRadio value="standard">
                <strong>Standard shipping</strong>&nbsp;&mdash; 3 to 5 business days
            </FluxFormRadio>

            <FluxFormRadio value="express">
                <strong>Express shipping</strong>&nbsp;&mdash; next business day
            </FluxFormRadio>
        </FluxFormRadioGroup>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxFormRadio, FluxFormRadioGroup } from '@flux-ui/components';
    import { ref } from 'vue';

    const value = ref('standard');
</script>