ColorPicker API

API documentation for ColorPicker component

ColorPicker#

Props#

Defines valid properties in ColorPicker component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerInstance) => ReactNode)	null	The children to render.
value	ColorInstance	null	The value of the color picker.
defaultValue	ColorInstance	null	The default value of the color picker.
format	ColorSpace	null	The format of the color picker.
disabled	boolean	null	Whether the color picker is disabled.
onValueChange	(event: useColorPickerChangeEvent) => void	null	Callback fired when the color picker's value is changed.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in ColorPicker component.

name	type	default	description
value	ColorInstance	null	The color of the color picker.
isAreaDragging	boolean	null	Whether the color picker area is dragging.

Exposes#

Defines the methods and properties exposed by ColorPicker component.

name	type	default	description
state	useColorPickerState	null	The state of the useColorPicker.
areaValue	ColorInstance	null	The area value of the color picker.
areaChannels	Color2DAxes	null	The channels of the area of the color picker.
setValue	(value: unknown) => void	null	Sets the value of the color picker.
handleAreaPointerDown	(event: PointerEvent) => void	null	Handles the area pointer down event.
handleAreaPointerMove	(event: PointerEvent) => void	null	Handles the area pointer move event.
handleAreaPointerUp	(event: PointerEvent) => void	null	Handles the area pointer up event.
handleAreaKeyDown	(event: KeyboardEvent<HTMLElement>) => void	null	Handles the area key down event.
areaStyles	CSSProperties	null	The styles of the area of the color picker.
swatchStyles	CSSProperties	null	The styles of the swatch of the color picker.
openEyeDropper	() => void	null	Opens the eye dropper.
syncChannelInputs	(color?: ColorInstance) => void	null	Syncs the channel inputs.
registerInputEl	(el: { elementRef: RefObject<HTMLInputElement> }) => void	null	Registers an input element.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPicker component.

name	type	default	description
root	ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPicker component.

values
ComponentInstance<ColorPickerProps, ColorPickerState, ColorPickerExposes>

ColorPickerArea#

Props#

Defines valid properties in ColorPickerArea component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerAreaInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerAreaInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerAreaPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerAreaInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerArea component.

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerArea component.

name	type	default	description
root	ColorPickerAreaPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerArea component.

values
ComponentInstance<ColorPickerAreaProps, ColorPickerAreaState, ColorPickerAreaExposes>

ColorPickerAreaBackground#

Props#

Defines valid properties in ColorPickerAreaBackground component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerAreaBackgroundInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerAreaBackgroundInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerAreaBackgroundPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerAreaBackgroundInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerAreaBackground component.

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPickerArea component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerAreaBackground component.

name	type	default	description
root	ColorPickerAreaBackgroundPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerAreaBackground component.

values
ComponentInstance<ColorPickerAreaBackgroundProps, ColorPickerAreaBackgroundState, ColorPickerAreaBackgroundExposes>

ColorPickerAreaThumb#

Props#

Defines valid properties in ColorPickerAreaThumb component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerAreaThumbInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerAreaThumbInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerAreaThumbPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerAreaThumbInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerAreaThumb component.

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPickerArea component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerAreaThumb component.

name	type	default	description
root	ColorPickerAreaThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerAreaThumb component.

values
ComponentInstance<ColorPickerAreaThumbProps, ColorPickerAreaThumbState, ColorPickerAreaThumbExposes>

ColorPickerSlider#

Props#

Defines valid properties in ColorPickerSlider component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerSliderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerSliderInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerSliderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerSliderInstance) => ReactNode)	null	The children to render.
channel	ColorSliderChannel	null	The channel of the slider.
orientation	"horizontal" \| "vertical"	null	The orientation of the slider.
disabled	boolean	null	Whether the slider is disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerSlider component.

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.
state	useColorPickerSliderState	null	The state of the useColorPickerSlider .
handleSliderPointerDown	(event: PointerEvent) => void	null	Handles the pointer down event.
handleSliderPointerMove	(event: PointerEvent) => void	null	Handles the pointer move event.
handleSliderPointerUp	(event: PointerEvent) => void	null	Handles the pointer up event.
handleSliderKeyDown	(event: KeyboardEvent<HTMLElement>) => void	null	Handles the key down event.
sliderStyle	CSSProperties	null	The style of the slider.
channelValue	number	null	The value of the channel.
channelRange	ColorChannelRange	null	The range of the channel.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerSlider component.

name	type	default	description
root	ColorPickerSliderPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerSlider component.

values
ComponentInstance<ColorPickerSliderProps, ColorPickerSliderState, ColorPickerSliderExposes>

ColorPickerSliderTrack#

Props#

Defines valid properties in ColorPickerSliderTrack component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerSliderTrackInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerSliderTrackInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerSliderTrackPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerSliderTrackInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerSliderTrack component

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerSliderTrack component.

name	type	default	description
root	ColorPickerSliderTrackPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerSliderTrack component.

values
ComponentInstance<ColorPickerSliderTrackProps, ColorPickerSliderTrackState, ColorPickerSliderTrackExposes>

ColorPickerSliderThumb#

Props#

Defines valid properties in ColorPickerSliderThumb component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerSliderThumbInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerSliderThumbInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerSliderThumbPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerSliderThumbInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerSliderThumb component

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerSliderThumb component.

name	type	default	description
root	ColorPickerSliderThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerSliderThumb component.

values
ComponentInstance<ColorPickerSliderThumbProps, ColorPickerSliderThumbState, ColorPickerSliderThumbExposes>

ColorPickerTransparencyGrid#

Props#

Defines valid properties in ColorPickerTransparencyGrid component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerTransparencyGridInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerTransparencyGridInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerTransparencyGridPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerTransparencyGridInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerTransparencyGrid component

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerTransparencyGrid component.

name	type	default	description
root	ColorPickerTransparencyGridPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerTransparencyGrid component.

values
ComponentInstance<ColorPickerTransparencyGridProps, ColorPickerTransparencyGridState, ColorPickerTransparencyGridExposes>

ColorPickerSwatch#

Props#

Defines valid properties in ColorPickerSwatch component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerSwatchInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerSwatchInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerSwatchPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerSwatchInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerSwatch component

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerSwatch component.

name	type	default	description
root	ColorPickerSwatchPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerSwatch component.

values
ComponentInstance<ColorPickerSwatchProps, ColorPickerSwatchState, ColorPickerSwatchExposes>

ColorPickerSwatchBackground#

Props#

Defines valid properties in ColorPickerSwatchBackground component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerSwatchBackgroundInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerSwatchBackgroundInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerSwatchBackgroundPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerSwatchBackgroundInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerSwatchBackground component

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerSwatchBackground component.

name	type	default	description
root	ColorPickerSwatchBackgroundPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerSwatchBackground component.

values
ComponentInstance<ColorPickerSwatchBackgroundProps, ColorPickerSwatchBackgroundState, ColorPickerSwatchBackgroundExposes>

ColorPickerEyeDropper#

Props#

Defines valid properties in ColorPickerEyeDropper component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerEyeDropperInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerEyeDropperInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerEyeDropperPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerEyeDropperInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerEyeDropper component

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerEyeDropper component.

name	type	default	description
root	ColorPickerEyeDropperPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerEyeDropper component.

values
ComponentInstance<ColorPickerEyeDropperProps, ColorPickerEyeDropperState, ColorPickerEyeDropperExposes>

ColorPickerInput#

Props#

Defines valid properties in ColorPickerInput component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ColorPickerInputInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ColorPickerInputInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ColorPickerInputPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ColorPickerInputInstance) => ReactNode)	null	The children to render.
channel	ColorInputChannel	null	The channel of the input.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ColorPickerInput component

name	type	default	description
colorpicker	ColorPickerInstance	null	The ColorPicker component instance.
state	useColorPickerInputState	null	The state of the useColorPickerInput.
channelValue	string	null	The value of the input.
channelRange	ColorChannelRange	null	The range of the input.
type	"number" \| "text"	null	The type of the input.
handleBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Handles the blur event.
handleKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Handles the key down event.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ColorPickerInput component.

name	type	default	description
root	ColorPickerInputPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ColorPickerInput component.

values
ComponentInstance<ColorPickerInputProps, ColorPickerInputState, ColorPickerInputExposes>