Color Picker
A component that allows users to select a color from a color picker.
Saved Colors
Anatomy
To set up the color picker correctly, you'll need to understand its anatomy and how we name its parts.
Each part includes a
data-part
attribute to help identify them in the DOM.
Examples
Learn how to use the ColorPicker
component in your project. Let's take a look at the most basic
example
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
export const Basic = () => {
return (
<ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
<ColorPicker.FormatSelect />
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
)
}
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
export const Basic = () => {
return (
<ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
<ColorPicker.FormatSelect />
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
)
}
<script setup lang="ts">
import { ColorPicker } from '@ark-ui/vue/color-picker'
</script>
<template>
<ColorPicker.Root>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
<ColorPicker.FormatSelect />
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
</template>
Controlled Color Picker
To create a controlled Color Picker component, manage the state of the current color using the
value
prop and update it when the onValueChange
or onValueChangeEnd
event handler is called:
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { useState } from 'react'
export const Controlled = () => {
const [color, setColor] = useState(() => parseColor('hsl(20, 100%, 50%)'))
return (
<ColorPicker.Root format="hsla" value={color} onValueChange={(e) => setColor(e.value)}>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
)
}
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { createSignal } from 'solid-js'
export const Controlled = () => {
const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
return (
<ColorPicker.Root
value={color()}
onValueChange={(e) => setColor(e.value)}
onValueChangeEnd={(e) => console.log(e.valueAsString)}
>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
)
}
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { ref } from 'vue'
const value = ref(parseColor('hsl(20, 100%, 50%)'))
</script>
<template>
<ColorPicker.Root format="hsla" v-model="value">
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
</template>
Using the Field Component
The Field
component helps manage form-related state and accessibility attributes of a color picker.
It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { Field } from '@ark-ui/react/field'
export const WithField = (props: Field.RootProps) => (
<Field.Root {...props}>
<ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
<ColorPicker.Label>Label</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content />
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
<Field.HelperText>Additional Info</Field.HelperText>
<Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>
)
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { Field } from '@ark-ui/solid/field'
export const WithField = (props: Field.RootProps) => (
<Field.Root {...props}>
<ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
<ColorPicker.Label>Label</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content />
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
<Field.HelperText>Additional Info</Field.HelperText>
<Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>
)
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Field } from '@ark-ui/vue/field'
const defaultValue = parseColor('hsl(20, 100%, 50%)')
</script>
<template>
<Field.Root>
<ColorPicker.Root :defaultValue>
<ColorPicker.Label>Label</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.ValueSwatch />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content />
</ColorPicker.Positioner>
<ColorPicker.HiddenInput />
</ColorPicker.Root>
<Field.HelperText>Additional Info</Field.HelperText>
<Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>
</template>
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
closeOnSelect | false | boolean Whether to close the color picker when a swatch is selected |
defaultOpen | boolean The initial open state of the color picker when it is first rendered. Use when you do not need to control its open state. | |
defaultValue | Color The initial value of the color picker when it is first rendered. Use when you do not need to control the state of the color picker. | |
disabled | boolean Whether the color picker is disabled | |
format | 'rgba' | ColorFormat The color format to use |
ids | Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput(id: string): string; channelSliderTrack(id: ColorChannel): string; channelSliderT... The ids of the elements in the color picker. Useful for composition. | |
immediate | boolean Whether to synchronize the present change immediately or defer it to the next frame | |
initialFocusEl | () => HTMLElement | null The initial focus element when the color picker is opened. | |
lazyMount | false | boolean Whether to enable lazy mounting |
name | string The name for the form input | |
onExitComplete | () => void Function called when the animation ends in the closed state | |
onFocusOutside | (event: FocusOutsideEvent) => void Function called when the focus is moved outside the component | |
onFormatChange | (details: FormatChangeDetails) => void Function called when the color format changes | |
onInteractOutside | (event: InteractOutsideEvent) => void Function called when an interaction happens outside the component | |
onOpenChange | (details: OpenChangeDetails) => void Handler that is called when the user opens or closes the color picker. | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void Function called when the pointer is pressed down outside the component | |
onValueChange | (details: ValueChangeDetails) => void Handler that is called when the value changes, as the user drags. | |
onValueChangeEnd | (details: ValueChangeDetails) => void Handler that is called when the user stops dragging. | |
open | boolean Whether the color picker is open | |
positioning | PositioningOptions The positioning options for the color picker | |
present | boolean Whether the node is present (controlled by the user) | |
readOnly | boolean Whether the color picker is read-only | |
required | boolean Whether the color picker is required | |
unmountOnExit | false | boolean Whether to unmount on exit. |
value | #000000 | Color The current color value |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | root |
[data-disabled] | Present when disabled |
[data-readonly] | Present when read-only |
AreaBackground
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Area
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
xChannel | ColorChannel | |
yChannel | ColorChannel |
AreaThumb
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | area-thumb |
[data-disabled] | Present when disabled |
ChannelInput
Prop | Default | Type |
---|---|---|
channel | ExtendedColorChannel | |
asChild | (props: ParentProps<'input'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
orientation | Orientation |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | channel-input |
[data-channel] | The color channel of the channelinput |
[data-disabled] | Present when disabled |
ChannelSliderLabel
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'label'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | channel-slider-label |
[data-channel] | The color channel of the channelsliderlabel |
ChannelSlider
Prop | Default | Type |
---|---|---|
channel | ColorChannel | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
orientation | Orientation |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | channel-slider |
[data-channel] | The color channel of the channelslider |
[data-orientation] | The orientation of the channelslider |
ChannelSliderThumb
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | channel-slider-thumb |
[data-channel] | The color channel of the channelsliderthumb |
[data-disabled] | Present when disabled |
[data-orientation] | The orientation of the channelsliderthumb |
ChannelSliderTrack
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | channel-slider-track |
[data-channel] | The color channel of the channelslidertrack |
[data-orientation] | The orientation of the channelslidertrack |
ChannelSliderValueText
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'span'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | channel-slider-value-text |
[data-channel] | The color channel of the channelslidervaluetext |
Content
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | content |
[data-placement] | The placement of the content |
[data-state] | "open" | "closed" |
Control
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | control |
[data-disabled] | Present when disabled |
[data-readonly] | Present when read-only |
[data-state] | "open" | "closed" |
[data-focus] | Present when focused |
EyeDropperTrigger
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | eye-dropper-trigger |
[data-disabled] | Present when disabled |
FormatSelect
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'select'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
FormatTrigger
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
HiddenInput
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'input'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Label
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'label'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | label |
[data-disabled] | Present when disabled |
[data-readonly] | Present when read-only |
[data-focus] | Present when focused |
Positioner
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
RootProvider
Prop | Default | Type |
---|---|---|
value | UseColorPickerReturn | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
immediate | boolean Whether to synchronize the present change immediately or defer it to the next frame | |
lazyMount | false | boolean Whether to enable lazy mounting |
onExitComplete | () => void Function called when the animation ends in the closed state | |
present | boolean Whether the node is present (controlled by the user) | |
unmountOnExit | false | boolean Whether to unmount on exit. |
SwatchGroup
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
SwatchIndicator
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Swatch
Prop | Default | Type |
---|---|---|
value | string | Color The color value | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
respectAlpha | boolean Whether to include the alpha channel in the color |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | swatch |
[data-state] | "checked" | "unchecked" |
[data-value] |
SwatchTrigger
Prop | Default | Type |
---|---|---|
value | string | Color The color value | |
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
disabled | boolean Whether the swatch trigger is disabled |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | swatch-trigger |
[data-state] | "checked" | "unchecked" |
[data-value] | |
[data-disabled] | Present when disabled |
TransparencyGrid
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
size | string |
Trigger
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | trigger |
[data-disabled] | Present when disabled |
[data-readonly] | Present when read-only |
[data-placement] | The placement of the trigger |
[data-state] | "open" | "closed" |
[data-focus] | Present when focused |
ValueSwatch
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
respectAlpha | boolean Whether to include the alpha channel in the color |
ValueText
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'span'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | color-picker |
[data-part] | value-text |
[data-disabled] | Present when disabled |
[data-focus] | Present when focused |
View
Prop | Default | Type |
---|---|---|
format | ColorFormat | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Accessibility
Keyboard Support
Key | Description |
---|---|
Enter | When focus is on the trigger, opens the color picker When focus is on a trigger of a swatch, selects the color (and closes the color picker) When focus is on the input or channel inputs, selects the color |
ArrowLeft | When focus is on the color area, decreases the hue value of the color When focus is on the channel sliders, decreases the value of the channel |
ArrowRight | When focus is on the color area, increases the hue value of the color When focus is on the channel sliders, increases the value of the channel |
ArrowUp | When focus is on the color area, increases the saturation value of the color When focus is on the channel sliders, increases the value of the channel |
ArrowDown | When focus is on the color area, decreases the saturation value of the color When focus is on the channel sliders, decreases the value of the channel |
Esc | Closes the color picker and moves focus to the trigger |