Flux

Appearance

Color select ​

This component allows users to select a color from a predefined set or choose a custom color using a color picker. It includes visual indications for selected and unselected colors, and supports additional actions in a flyout pane for advanced color selection.

Required icons

ellipsis-h

Props

model-value?: string
The selected color.

colors?: string[]
The default set of colors that are shown as options.

is-custom-allowed?: boolean
If a custom color is allowed, the color picker is enabled and allows the user to select a custom color.

Emits

update:model-value: [string]
The updated selected color.

Examples ​

Simple

With this example, the user can select a color from a set of predefined colors.

#ef4444

<template>
    <FluxColorSelect
        v-model="color"
        :colors="[red500, orange500, amber500, yellow500, lime500, green500]"/>

    <kbd>{{ color }}</kbd>
</template>

<script
    lang="ts"
    setup>
    import { FluxColorSelect } from '@flux-ui/flux';
    import { amber500, green500, lime500, orange500, red500, yellow500 } from '@flux-ui/internals';
    import { ref } from 'vue';

    const color = ref(red500);
</script>

Custom

In this example, the user can select a color from a predefined set of colors, or select a custom color.

#6366f1

<template>
    <FluxColorSelect
        v-model="color"
        :colors="[emerald500, teal500, cyan500, sky500, blue500, indigo500]"
        is-custom-allowed/>

    <kbd>{{ color }}</kbd>
</template>

<script
    lang="ts"
    setup>
    import { FluxColorSelect } from '@flux-ui/flux';
    import { blue500, cyan500, emerald500, indigo500, sky500, teal500 } from '@flux-ui/internals';
    import { ref } from 'vue';

    const color = ref(indigo500);
</script>

Used components ​