Preview

Installation

npx sigma-ui@latest add color

Usage

<script setup lang="ts">
import {
  ColorArea,
  ColorAreaArea,
  ColorAreaThumb,
  ColorField,
  ColorFieldInput,
  ColorSlider,
  ColorSliderThumb,
  ColorSliderTrack,
  ColorSwatch,
} from '@/components/ui/color';
</script>

<template>
  <ColorArea v-model="color">
    <template #default="{ style }">
      <ColorAreaArea :style="style">
        <ColorAreaThumb />
      </ColorAreaArea>
    </template>
  </ColorArea>
  <ColorSlider v-model="color" channel="hue">
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSlider>
  <ColorSwatch :color="color" />
  <ColorField v-model="color">
    <ColorFieldInput />
  </ColorField>
</template>

v-model is a color string. ColorArea defaults to the HSL space, with hue on the horizontal axis and saturation on the vertical axis. ColorSlider takes a channel such as hue, saturation, lightness, or alpha. ColorSwatchPicker selects one preset and can share the same v-model.

Examples

Picker

API Reference

ColorArea

Props

Prop	Type	Default
modelValue The color value (controlled). Can be a hex string or Color object.	string | Color	-
defaultValue The default color value (uncontrolled).	string | Color	-
colorSpace The color space to operate in.	ColorSpace	-
xChannel Color channel for the horizontal (x) axis.	ColorChannel	-
yChannel Color channel for the vertical (y) axis.	ColorChannel	-
disabled When true, prevents the user from interacting with the area.	boolean	-
xName The name of the x channel input element for form submission.	string	-
yName The name of the y channel input element for form submission.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue	[value: string]
update:color	[value: Color]
change	[value: string]
changeEnd	[value: string]

Slots

Slot	Scope
default The color surface. Receives the gradient style for the area.	{ style: CSSProperties; }

ColorAreaArea

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

ColorAreaThumb

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

ColorField

Props

Prop	Type	Default
modelValue The color value (controlled). Can be a hex string or Color object.	string | Color	-
defaultValue The default color value (uncontrolled).	string | Color	-
colorSpace The color space to operate in when displaying a channel.	ColorSpace	-
channel The color channel to display. If not provided, displays hex value.	ColorChannel	-
placeholder Placeholder text when the field is empty.	string	-
disabled When true, prevents the user from interacting with the field.	boolean	-
readonly When true, the field is read-only.	boolean	-
disableWheelChange When true, prevents the value from changing on wheel scroll.	boolean	-
locale The locale to use for number formatting.	string	-
step Custom step value for increment/decrement. Defaults to channel step or 1 for hex.	number	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue	[value: string]
update:color	[value: Color]

Slots

Slot	Scope
default The content of the component.	-

ColorFieldInput

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

ColorSlider

Props

Prop	Type	Default
modelValue The color value (controlled). Can be a hex string or Color object.	string | Color	-
defaultValue The default color value (uncontrolled).	string | Color	-
colorSpace The color space to operate in.	ColorSpace	-
channelrequired The color channel that this slider manipulates.	ColorChannel	-
orientation The orientation of the slider.	DataOrientation	-
dir The reading direction of the slider.	Direction	-
inverted Whether the slider is visually inverted.	boolean	-
disabled When true, prevents the user from interacting with the slider.	boolean	-
step Custom step value for increment/decrement. Defaults to the channel's natural step.	number	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue	[value: string | Color]
update:color	[value: Color]
change	[value: string]
changeEnd	[value: string]

Slots

Slot	Scope
default The content of the component.	-

ColorSliderThumb

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Thumb content. Receives the channel name and its current value.	{ channelName: string; channelValue: number; }

ColorSliderTrack

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

ColorSwatch

Props

Prop	Type	Default
color The color to display in the swatch as a hex string or Color object. Example: #16a372, #ff5733, or { space: 'hsl', h: 120, s: 100, l: 50, alpha: 1 }.	string | Color	-
label Optional accessible label for the color. If omitted, the color name will be derived from the color value.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Replaces the painted swatch. Receives the hex color and its alpha.	{ color: string; alpha: number; }

ColorSwatchPicker

Props

Prop	Type	Default
defaultValue The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox	string | string[]	-
modelValue The controlled value of the listbox. Can be binded with v-model.	string | string[]	-
multiple Whether multiple options can be selected or not.	boolean	-
disabled When true, prevents the user from interacting with listbox	boolean	-
dir The reading direction of the listbox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
orientation The orientation of the listbox. <br>Mainly so arrow navigation is done accordingly (left & right vs. up & down)	DataOrientation	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-
highlightOnHover When true, hover over item will trigger highlight	boolean	-
loop When true, keyboard navigation will loop from last item to first, and vice versa.	boolean	-
selectionBehavior How multiple selection should behave in the collection.	"replace" | "toggle"	'toggle'

Events

Event	Payload
update:modelValue Event handler called when the value changes.	[value: AcceptableValue]
highlight Event handler when highlighted element changes.	[payload: { ref: HTMLElement; value: AcceptableValue; }]
entryFocus Event handler called when container is being focused. Can be prevented.	[event: CustomEvent<any>]
leave Event handler called when the mouse leave the container	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

ColorSwatchPickerItem

Props

Prop	Type	Default
valuerequired The color to display in the swatch as a hex string. Example: #16a372 or #ff5733.	string	-
disabled When true, prevents the user from interacting with the item.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Events

Event	Payload
select Event handler called when the selecting item. <br> It can be prevented by calling event.preventDefault.	[event: SelectEvent$3<AcceptableValue>]

Slots

Slot	Scope
default The content of the component.	-

ColorSwatchPickerItemSwatch

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
label Optional accessible label for the color. If omitted, the color name will be derived from the color value.	string	-

Accessibility

The area and the slider are sliders. The hex field is a text input, and each preset swatch is an option in a listbox.

Key	Description
Tab	Moves focus between the swatches, the area, the slider, and the field.
Arrow keys	Move the focused thumb along its channel.
Enter or Space	Selects the focused preset.