ColorPicker API

API documentation for ColorPicker component

ColorPicker#

Props#

State#

Exposes#

Interfaces#

Types#

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	ColorPickerRootInstance	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	ColorPickerRootInstance	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	ColorPickerRootInstance	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	ColorPickerRootInstance	null	The ColorPicker component instance.

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	ColorPickerRootInstance	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	ColorPickerRootInstance	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	ColorPickerRootInstance	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	ColorPickerRootInstance	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	ColorPickerRootInstance	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	ColorPickerRootInstance	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	ColorPickerRootInstance	null	The ColorPicker component instance.

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>