ComponentsColor picker
Color Picker
The Color Picker is a versatile and feature-rich color selection tool for your applications. It provides support for different color spaces, user interaction, and accessibility.
The Color Picker is a versatile and feature-rich color selection tool for your applications. It provides support for different color spaces, user interaction, and accessibility.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
string
'ltr' | 'rtl'
The direction of the color picker
boolean
Whether the color picker is disabled
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ content: string area: string areaGradient: string areaThumb: string channelInput(id: string): string channelSliderTrack(id: ColorChannel): string channelSliderThumb(id: ColorChannel): string }>
The ids of the elements in the color picker. Useful for composition.
string
The name for the form input
(details: ValueChangeDetails) => void
Handler that is called when the value changes, as the user drags.
(details: ValueChangeDetails) => void
Handler that is called when the user stops dragging.
boolean
Whether the color picker is read-only
string
The current color value
number
The alpha value of the color
[ColorChannel, ColorChannel, ColorChannel]
The current color channels of the color
Dict<any>
Dict<any>
(props: ColorAreaProps) => Dict<any>
(props: ColorAreaProps) => Dict<any>
(props: ColorAreaProps) => Dict<any>
(props: ColorChannelInputProps) => Dict<any>
(props: ColorChannelProps) => Dict<any>
(props: ColorChannelProps) => Dict<any>
(props: ColorChannelProps) => Dict<any>
(props: ColorSwatchProps) => Dict<any>
(props: ColorSwatchProps) => Dict<any>
Dict<any>
boolean
Whether the color picker is being dragged
(value: number) => void
Function to set the color alpha
(channel: ColorChannel, value: number) => void
Function to set the color value of a specific channel
(value: string | Color) => void
Function to set the color value
(format: ColorFormat) => void
Function to set the color format
string
The current color value (as a string)
Color
The current color value (as a Color object)
ColorChannel
ColorChannel
ColorChannel
ColorChannel
string | Color
boolean
string | Color
boolean
ExtendedColorChannel
Orientation
ColorChannel
Orientation