Color Picker
InputInline color picker with HEX / RGB / HSL formats, optional alpha + swatches, and native eye-dropper.
Color PickerInput · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import ColorPicker from @otfdashkit/ui.
Code
// Color Picker — Inline color picker with HEX / RGB / HSL formats, optional alpha + swatches, and native eye-dropper.
//
// Install:
// bun add @otfdashkit/ui
import { ColorPicker } from '@otfdashkit/ui'
export function Example() {
return (
<ColorPicker>
{/* your content */}
</ColorPicker>
)
}Props
Props declared in the ColorPicker source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | (readonly string[] & string) | Uncontrolled initial value. | |
| disabled | boolean | false | Disable interaction. |
| format | 'hex' | 'rgb' | 'hsl' | 'hex' | Format for the text input + picker. Default 'hex'. |
| onValueChange | (value: string) => void | Fires whenever the color changes. | |
| showAlpha | boolean | false | Include alpha channel (only meaningful for hex). Default false. |
| showEyeDropper | boolean | true | Show the eye-dropper button when the API is available. Default true. |
| swatches | string[] | Optional preset palette displayed as clickable swatches. | |
| value | string | Controlled color value (e.g. '#3b82f6' for hex, 'rgb(59, 130, 246)' for rgb). |