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.

sub-label?: string
A secondary line of text shown below the label. The radio stays aligned with the label.

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>
    <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>
</template>

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

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

Sub-label

A radio with a secondary line of text below the label.

Plan

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    as="group"
                    label="Plan">
                    <FluxFormRadioGroup v-model="plan">
                        <FluxFormRadio
                            value="starter"
                            label="Starter"
                            sub-label="For individuals getting started with the basics."/>

                        <FluxFormRadio
                            value="pro"
                            label="Pro"
                            sub-label="For growing teams that need more power and seats."/>
                    </FluxFormRadioGroup>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

    const plan = ref('pro');
</script>

Disabled option

A radio group where a single option is disabled.

<template>
    <FluxFormRadioGroup v-model="value">
        <FluxFormRadio
            value="standard"
            label="Standard shipping"/>

        <FluxFormRadio
            value="express"
            label="Express shipping"/>

        <FluxFormRadio
            value="overnight"
            label="Overnight shipping"
            sub-label="Currently unavailable in your region."
            disabled/>
    </FluxFormRadioGroup>
</template>

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

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

Label only

A minimal radio group using just the label prop.

<template>
    <FluxFormRadioGroup v-model="value">
        <FluxFormRadio
            value="yes"
            label="Yes"/>

        <FluxFormRadio
            value="no"
            label="No"/>
    </FluxFormRadioGroup>
</template>

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

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

Used components ​