Flux

Radio group ​

A radio group lets users pick a single option from a small, fully visible set of choices. Each choice is a Radio, and the selected one is bound through v-model and reflects the value of the active radio.

TIP

Reach for a radio group when every option should stay visible at a glance. When the list is long or space is tight, prefer a Select instead.

Props

model-value?: string | number | boolean
The value of the selected radio.

name?: string
The shared name of the underlying radio inputs. Generated automatically when omitted.

aria-label?: string
The accessible label of the radio group.

is-inline?: boolean
Lays the radios out horizontally instead of stacked.

disabled?: boolean
If the entire radio group is disabled.

error?: string
The error message, marking every radio as invalid.

is-readonly?: boolean
If the radio group is read-only.

Emits

update:model-value: [string, number, boolean]
Triggered when the selected radio changes.

Slots

default
The radios of the group, rendered as [Radio](./item) components.

Examples ​

Basic

A radio group inside a form field.

Plan

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    as="group"
                    label="Plan">
                    <FluxFormRadioGroup v-model="plan">
                        <FluxFormRadio
                            value="free"
                            label="Free"/>

                        <FluxFormRadio
                            value="pro"
                            label="Pro"/>

                        <FluxFormRadio
                            value="enterprise"
                            label="Enterprise"/>
                    </FluxFormRadioGroup>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

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

Inline

A radio group laid out horizontally.

<template>
    <Preview>
        <FluxFormRadioGroup
            v-model="size"
            is-inline>
            <FluxFormRadio
                value="s"
                label="Small"/>

            <FluxFormRadio
                value="m"
                label="Medium"/>

            <FluxFormRadio
                value="l"
                label="Large"/>
        </FluxFormRadioGroup>
    </Preview>
</template>

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

    const size = ref('m');
</script>

Disabled item

A radio group with a single disabled option.

<template>
    <Preview>
        <FluxFormRadioGroup v-model="plan">
            <FluxFormRadio
                value="free"
                label="Free"/>

            <FluxFormRadio
                value="pro"
                label="Pro"/>

            <FluxFormRadio
                value="enterprise"
                label="Enterprise"
                disabled/>
        </FluxFormRadioGroup>
    </Preview>
</template>

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

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

Used components ​