ColorSelect

A dropdown selector where each option displays a colored swatch alongside its label. Ideal for category or tag selection where color coding matters.

Usage

<script setup>
import { ref } from 'vue'
import { ColorSelect } from 'praxis-vue-ui'

const statuses = [
  { id: 1, name: 'Active', color: '22c55e' },
  { id: 2, name: 'Pending', color: 'f59e0b' },
  { id: 3, name: 'Inactive', color: 'ef4444' },
]
const selected = ref(null)
</script>

<template>
  <ColorSelect
    v-model="selected"
    :options="statuses"
    label="Status"
  />
</template>

Props

Prop	Type	Default	Description
modelValue	unknown	null	Selected value. Use with v-model.
optionsrequired	object[]	—	Options with name and color (hex without #) properties.
label	string	undefined	Field label.
placeholder	string	'Select...'	Dropdown placeholder.
disabled	boolean	false	Disables the select.
reduce	(option) => unknown	option => option.id	Value extractor.

Emits

Event	Payload	Description
update:modelValue	unknown	Emitted on selection change.