useInputColor

Usage#

import { parseColor, useInputColor } from '@primereact/headless/inputcolor';

const inputColor = useInputColor({ defaultValue: parseColor('#ff0000') });
 
<div {...inputColor.rootProps}>
    <div {...inputColor.areaProps}>
        <div {...inputColor.areaHandleProps}></div>
    </div>
    <div {...inputColor.swatchProps}></div>
    <button {...inputColor.eyeDropperProps}></button>
    <input {...inputColor.getInputProps({ channel: 'hex' })} />
</div>;

useInputColor manages a full color picker with a 2D gradient area, channel sliders, text inputs, and an EyeDropper button. See Primitive for a component-based API.

Features#

• Complete picker surface — returns ready-to-spread props for root, area, areaHandle, swatch, eyeDropper, and sliderHandle
• Dynamic channel props — getSliderProps and getInputProps build props for any individual color channel
• 2D area interaction — pointer capture for smooth dragging plus arrow-key navigation across saturation/brightness
• Multiple color spaces — hsba, hsla, rgba, and oklcha formats with shared ColorInstance value type
• CSS custom properties — style objects expose gradients and handle positions so rendering stays fully CSS-driven
• Color parsing — companion parseColor utility constructs ColorInstance values from hex strings

Working with callbacks#

Controlled color#

Pass value and onValueChange to own the selected color externally — required for syncing with form state or remote data.

const [color, setColor] = React.useState(parseColor('#276def'));
 
useInputColor({
    value: color,
    onValueChange: (e) => setColor(e.value)
});

Commit on interaction end#

onValueChangeEnd fires when pointer interaction stops (area release, slider drop, or input commit). Use it for expensive work such as persisting to a server.

useInputColor({
    defaultValue: parseColor('#276def'),
    onValueChangeEnd: (e) => saveColor(e.color)
});

Channel sliders via useSlider#

getSliderProps returns options you pass into useSlider to render a slider for any channel. Set orientation: 'vertical' when laying out sliders on the side of the area.

const { style, ...sliderOptions } = inputColor.getSliderProps({ channel: 'hue' });
const slider = useSlider(sliderOptions);

Channel inputs#

getInputProps produces props for text or number inputs bound to a specific channel — useful for hex entry alongside RGB fields.

<input {...inputColor.getInputProps({ channel: 'hex' })} />
<input {...inputColor.getInputProps({ channel: 'red' })} />
<input {...inputColor.getInputProps({ channel: 'alpha' })} />

EyeDropper integration#

Spread eyeDropperProps on a button to open the native browser EyeDropper API — the picked color is committed automatically.

<button {...inputColor.eyeDropperProps}>Pick color</button>

Reading live state#

state.value exposes the current ColorInstance and state.isAreaDragging lets you render drag-time UI.

<span>{inputColor.state.value.toString('hex')}</span>;
{
    inputColor.state.isAreaDragging && <span>Dragging...</span>;
}

Styling with data attributes#

areaProps.style, getSliderProps().style, and swatchProps.style expose CSS custom properties for gradients and handle positioning.

State-based attributes such as data-disabled and data-dragging are emitted on the relevant parts.

[data-scope='inputcolor'][data-part='area'] {
    background: var(--area-background);
}
 
[data-part='area-handle'] {
    top: var(--px-handle-position-top);
    left: var(--px-handle-position-left);
    background: var(--px-handle-background);
}
 
.slider-track {
    background: var(--px-slider-background);
}
 
.slider-handle {
    background: var(--px-slider-handle-background);
}
 
[data-part='swatch'] {
    background: var(--px-swatch-background);
}
 
[data-disabled] {
    opacity: 0.5;
    pointer-events: none;
}
 
[data-dragging] {
    cursor: grabbing;
}

API#

useInputColor#

Accessibility#

Space opens the picker, Arrow keys navigate the color grid, and Enter confirms selection. See Primitive for full WAI-ARIA compliance details.