InputColor

An unstyled, accessible color picker component with compound composition.

Build fully custom color pickers with complete control over area, sliders, swatch, and input rendering.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use InputColor with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with twelve sub-components: Root, Area, AreaBackground, AreaThumb, Slider, SliderTrack, SliderThumb, Swatch, SwatchBackground, EyeDropper, Input, TransparencyGrid
2D color gradient area with pointer capture for smooth picking
Channel-based sliders for hue, alpha, and other color channels
Multiple color formats: HSBA, HSLA, RGBA, OKLCHA
Native EyeDropper API integration

Usage#

import { InputColor } from 'primereact/inputcolor';

<InputColor.Root>
    <InputColor.Area>
        <InputColor.AreaBackground />
        <InputColor.AreaThumb />
    </InputColor.Area>
    <InputColor.Slider>
        <InputColor.TransparencyGrid />
        <InputColor.SliderTrack />
        <InputColor.SliderThumb />
    </InputColor.Slider>
    <InputColor.Swatch>
        <InputColor.TransparencyGrid />
        <InputColor.SwatchBackground />
    </InputColor.Swatch>
    <InputColor.EyeDropper></InputColor.EyeDropper>
    <InputColor.Input />
</InputColor.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<InputColor.Root as="section">
    <InputColor.Area as="div">
        <InputColor.AreaBackground as="div" />
        <InputColor.AreaThumb as="div" />
    </InputColor.Area>
    <InputColor.EyeDropper as="a" />
</InputColor.Root>

Default elements: Root=div, Area=div, AreaBackground=div, AreaThumb=div, Slider=SliderRoot, SliderTrack=SliderTrack, SliderThumb=SliderThumb, Swatch=div, SwatchBackground=div, EyeDropper=button, Input=InputText, TransparencyGrid=div.

Render Function Children#

Sub-components accept a render function as children, providing access to the component instance. The instance exposes inputColor (root instance with state.value and state.isAreaDragging).

<InputColor.Swatch>{(instance) => <span>{instance.inputColor?.state.value.toString('hex')}</span>}</InputColor.Swatch>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

InputColorRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorRootInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`ColorInstance`	—
The value of the color picker.
`defaultValue`	`ColorInstance`	—
The default value of the color picker.
`format`	`ColorSpace`	—
The format of the color picker.
`disabled`	`boolean`	—
Whether the color picker is disabled.
`onValueChange`	`(event: useInputColorChangeEvent) => void`	—
Callback fired when the color picker's value is changed.
`onValueChangeEnd`	`(event: useInputColorChangeEvent) => void`	—
Callback fired when the pointer interaction ends.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"root"`
`data-disabled`	Present when disabled
`data-dragging`	Present when area is dragged

Defines passthrough(pt) options of InputColor component.

label	type	description
root	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
area	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the area's DOM element.
areaBackground	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the area background's DOM element.
areaThumb	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the area thumb's DOM element.
input	InputColorRootPassThroughType<HTMLAttributes<HTMLInputElement>>	Used to pass attributes to the input's DOM element.
slider	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the slider's DOM element.
sliderTrack	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the slider track's DOM element.
sliderThumb	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the slider thumb's DOM element.
swatch	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the swatch's DOM element.
swatchBackground	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the swatch background's DOM element.
eyeDropper	InputColorRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the eye dropper's DOM element.
transparencyGrid	InputColorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the transparency grid's DOM element.

InputColorArea#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorAreaInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorAreaInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorAreaInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorAreaPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorAreaInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"area"`

CSS Custom Properties

The Area element sets CSS custom properties on its style for gradient rendering and thumb positioning.

CSS Variable	Description
`--area-background`	Solid hue background of the area
`--area-gradient`	Combined saturation/brightness gradient overlay
`--thumb-background`	Current color for the area thumb
`--thumb-position-top`	Vertical position of the area thumb
`--thumb-position-left`	Horizontal position of the area thumb

Defines passthrough(pt) options of InputColorArea component.

label	type	description
root	InputColorAreaPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorAreaBackground#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorAreaBackgroundInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorAreaBackgroundInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorAreaBackgroundInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorAreaBackgroundPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorAreaBackgroundInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputColorAreaBackground component.

label	type	description
root	InputColorAreaBackgroundPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorAreaThumb#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorAreaThumbInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorAreaThumbInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorAreaThumbInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorAreaThumbPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorAreaThumbInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"area-thumb"`

Defines passthrough(pt) options of InputColorAreaThumb component.

label	type	description
root	InputColorAreaThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorSlider#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorSliderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorSliderInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorSliderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorSliderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorSliderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`channel`	`ColorSliderChannel`	—
The channel of the slider.
`orientation`	`"horizontal"` \| `"vertical"`	—
The orientation of the slider.
`disabled`	`boolean`	—
Whether the slider is disabled.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"slider"`
`data-orientation`	`"horizontal"` or `"vertical"`
`data-channel`	The slider channel name

CSS Custom Properties

The Slider element sets CSS custom properties on its style for track and thumb rendering.

CSS Variable	Description
`--slider-background`	Channel gradient for the slider track
`--slider-thumb-background`	Current channel color for the thumb

Defines passthrough(pt) options of InputColorSlider component.

label	type	description
root	InputColorSliderPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorSliderTrack#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorSliderTrackInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorSliderTrackInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorSliderTrackInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorSliderTrackPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorSliderTrackInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputColorSliderTrack component.

label	type	description
root	InputColorSliderTrackPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorSliderThumb#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorSliderThumbInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorSliderThumbInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorSliderThumbInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorSliderThumbPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorSliderThumbInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"slider-thumb"`

Defines passthrough(pt) options of InputColorSliderThumb component.

label	type	description
root	InputColorSliderThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorSwatch#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorSwatchInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorSwatchInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorSwatchInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorSwatchPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorSwatchInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"swatch"`

CSS Custom Properties

The Swatch element sets a CSS custom property on its style for color rendering.

CSS Variable	Description
`--swatch-background`	Current color for the swatch

Defines passthrough(pt) options of InputColorSwatch component.

label	type	description
root	InputColorSwatchPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorSwatchBackground#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorSwatchBackgroundInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorSwatchBackgroundInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorSwatchBackgroundInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorSwatchBackgroundPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorSwatchBackgroundInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputColorSwatchBackground component.

label	type	description
root	InputColorSwatchBackgroundPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorEyeDropper#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorEyeDropperInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorEyeDropperInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorEyeDropperInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorEyeDropperPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorEyeDropperInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"eye-dropper"`

Defines passthrough(pt) options of InputColorEyeDropper component.

label	type	description
root	InputColorEyeDropperPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorInput#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorInputInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorInputInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorInputInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorInputPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorInputInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`channel`	`ColorInputChannel`	—
The channel of the input.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputcolor"`
`data-part`	`"input"`
`data-channel`	The input channel name

Defines passthrough(pt) options of InputColorInput component.

label	type	description
root	InputColorInputPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InputColorTransparencyGrid#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputColorTransparencyGridInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputColorTransparencyGridInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputColorTransparencyGridInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputColorTransparencyGridPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputColorTransparencyGridInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InputColorTransparencyGrid component.

label	type	description
root	InputColorTransparencyGridPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

InputColorArea#

The area thumb has role="slider" with aria-roledescription="2d slider". It includes aria-label describing the two axes (e.g., "saturation and brightness"), aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext describing the current channel values.

Keyboard Support#

Key	Function
`tab`	Moves focus to the area thumb.
`right arrow`	Moves the area thumb to the right.
`left arrow`	Moves the area thumb to the left.
`up arrow`	Moves the area thumb up.
`down arrow`	Moves the area thumb down.

InputColorSlider#

The slider thumb has role="slider" with aria-label, aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext describing the current channel value.

Keyboard Support#

Key	Function
`tab`	Moves focus to the slider thumb.
`up arrow` \|\| `left arrow`	Decrements the slider value.
`down arrow` \|\| `right arrow`	Increments the slider value.

InputColor

Pre-styled Versions

Features#

Usage#

Behavior#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

InputColorRoot#

InputColorArea#

InputColorAreaBackground#

InputColorAreaThumb#

InputColorSlider#

InputColorSliderTrack#

InputColorSliderThumb#

InputColorSwatch#

InputColorSwatchBackground#

InputColorEyeDropper#

InputColorInput#

InputColorTransparencyGrid#

Accessibility#

InputColorArea#

Screen Reader#

Keyboard Support#

InputColorSlider#

Screen Reader#

Keyboard Support#