Flux

Appearance

Segmented control ​

This component is a UI element that allows users to choose between multiple options by selecting one of the multiple segments. Each segment is represented as a Segmented control item with a distinct label and/or icon, and the currently selected segment is visually indicated by a highlighted background. It is commonly used in navigation, forms, or settings, providing a compact and intuitive way for users to make a choice.

The selected segment is bound through v-model and reflects the value of the active Segmented control item.

TIP

To switch between content areas based on the selected segment, use Tabs.

Props

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

aria-label?: string
The accessible label of the segmented control.

is-fill?: boolean
Allows the segmented control to fill in its parent.

size?: FluxSize
The size of the segmented control.

Emits

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

Slots

default
The segments of the segmented control.

Examples ​

Basic

A basic segmented control.

<template>
    <FluxSegmentedControl v-model="view">
        <FluxSegmentedControlItem
            value="grid"
            label="Grid"/>

        <FluxSegmentedControlItem
            value="list"
            label="List"/>

        <FluxSegmentedControlItem
            value="stack"
            label="Stack"/>
    </FluxSegmentedControl>
</template>

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

    const view = ref('grid');
</script>

Icons

A segmented control with icons only.

<template>
    <FluxSegmentedControl v-model="view">
        <FluxSegmentedControlItem
            value="grid"
            icon="grid-2"
            aria-label="Grid"/>

        <FluxSegmentedControlItem
            value="list"
            icon="list"
            aria-label="List"/>

        <FluxSegmentedControlItem
            value="stack"
            icon="rectangle-history"
            aria-label="Stack"/>
    </FluxSegmentedControl>
</template>

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

    const view = ref('grid');
</script>

With tabs

A segmented control driving the tab bar of [Tabs](../tabs/) to switch content.

Showing the knowledge base as a grid. 

<template>
    <FluxPane style="width: 100%">
        <FluxTabs>
            <template #tabs="{tabs, modelValue, activate}">
                <FluxPaneBody>
                    <FluxSegmentedControl
                        is-fill
                        :model-value="modelValue"
                        @update:model-value="activate">
                        <FluxSegmentedControlItem
                            v-for="(tab, index) in tabs"
                            :key="index"
                            :value="index"
                            :icon="tab.icon"
                            :label="tab.label"/>
                    </FluxSegmentedControl>
                </FluxPaneBody>
            </template>

            <FluxTab
                icon="grid-2"
                label="Grid">
                <FluxPaneBody>
                    Showing the knowledge base as a grid.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="list"
                label="List">
                <FluxPaneBody>
                    Showing the knowledge base as a list.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="rectangle-history"
                label="Stack">
                <FluxPaneBody>
                    Showing the knowledge base as a stack.
                </FluxPaneBody>
            </FluxTab>
        </FluxTabs>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxPane, FluxPaneBody, FluxSegmentedControl, FluxSegmentedControlItem, FluxTab, FluxTabs } from '@flux-ui/components';
</script>

Sizes

A segmented control in all available sizes.

<template>
    <div style="display: flex; flex-flow: column; gap: 12px; align-items: start">
        <FluxSegmentedControl
            v-model="view"
            size="small">
            <FluxSegmentedControlItem
                value="grid"
                icon="grid-2"
                label="Grid"/>

            <FluxSegmentedControlItem
                value="list"
                icon="list"
                label="List"/>

            <FluxSegmentedControlItem
                value="stack"
                icon="rectangle-history"
                label="Stack"/>
        </FluxSegmentedControl>

        <FluxSegmentedControl
            v-model="view"
            size="medium">
            <FluxSegmentedControlItem
                value="grid"
                icon="grid-2"
                label="Grid"/>

            <FluxSegmentedControlItem
                value="list"
                icon="list"
                label="List"/>

            <FluxSegmentedControlItem
                value="stack"
                icon="rectangle-history"
                label="Stack"/>
        </FluxSegmentedControl>

        <FluxSegmentedControl
            v-model="view"
            size="large">
            <FluxSegmentedControlItem
                value="grid"
                icon="grid-2"
                label="Grid"/>

            <FluxSegmentedControlItem
                value="list"
                icon="list"
                label="List"/>

            <FluxSegmentedControlItem
                value="stack"
                icon="rectangle-history"
                label="Stack"/>
        </FluxSegmentedControl>
    </div>
</template>

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

    const view = ref('grid');
</script>

Fill

A segmented control that fills its parent.

<template>
    <FluxSegmentedControl
        v-model="view"
        is-fill>
        <FluxSegmentedControlItem
            value="grid"
            icon="grid-2"
            label="Grid"/>

        <FluxSegmentedControlItem
            value="list"
            icon="list"
            label="List"/>

        <FluxSegmentedControlItem
            value="stack"
            icon="rectangle-history"
            label="Stack"/>
    </FluxSegmentedControl>
</template>

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

    const view = ref('grid');
</script>

Disabled item

A segmented control with a single disabled segment.

<template>
    <FluxSegmentedControl v-model="view">
        <FluxSegmentedControlItem
            value="grid"
            icon="grid-2"
            label="Grid"/>

        <FluxSegmentedControlItem
            value="list"
            icon="list"
            label="List"/>

        <FluxSegmentedControlItem
            value="stack"
            icon="rectangle-history"
            label="Stack"
            disabled/>
    </FluxSegmentedControl>
</template>

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

    const view = ref('grid');
</script>

Disabled

A segmented control disabled in its entirety.

<template>
    <FluxDisabled disabled>
        <FluxSegmentedControl v-model="view">
            <FluxSegmentedControlItem
                value="grid"
                icon="grid-2"
                label="Grid"/>

            <FluxSegmentedControlItem
                value="list"
                icon="list"
                label="List"/>

            <FluxSegmentedControlItem
                value="stack"
                icon="rectangle-history"
                label="Stack"/>
        </FluxSegmentedControl>
    </FluxDisabled>
</template>

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

    const view = ref('grid');
</script>

Used components ​