Inputs@knitui/components

ColorPicker

ColorPicker provides a draggable saturation area, a hue slider (and optional alpha slider for alpha formats), and an optional predefined swatch grid. The format prop controls the output string format. Accent comes from the Tamagui theme prop — no Mantine color prop.

WebiOSAndroid8 style slots15 own props9 examples

Stories Source Tests Open in Storybook

import { ColorPicker } from "@knitui/components";

Playground

Loading playground…

formatOutput color format. Alpha formats (hexa / rgba / hsla) also render the alpha slider.

sizeControls the overall width and the height of the saturation / slider areas.

withPickerWhen false only the swatch grid is shown — no saturation or hue controls.

true

fullWidth

false

focusable

true

defaultValue

saturationLabel

hueLabel

alphaLabel

name

Playground

<ColorPicker
  defaultValue="#228be6"
  format="hex"
  size="md"
  withPicker
  fullWidth={false}
  focusable
/>

Examples

Sizes

All seven sizes displayed side by side to compare the picker footprint.

Loading example…

SizesSource Storybook

Shadows

The inherited shadow elevation ladder, from xs to xl.

Loading example…

ShadowsSource Storybook

Alpha Format

Alpha formats (hexa / rgba / hsla) add an alpha slider and a preview swatch.

Loading example…

Alpha FormatSource Storybook

With Swatches

Predefined swatch grid shown below the picker — clicking a swatch jumps to that color.

Loading example…

With SwatchesSource Storybook

Swatches Only

Hides the saturation / hue controls; only the swatch grid is rendered.

Loading example…

Swatches OnlySource Storybook

Accessible Labels

Accessible labels wired to the saturation, hue, and alpha sliders for screen readers.

Loading example…

Accessible LabelsSource Storybook

Styles

Per-slot styles targets individual parts — here the saturation area, hueSlider, and thumb.

Loading example…

StylesSource Storybook

Controlled

Controlled picker — current color value is displayed and kept in sync via React state.

Loading example…

ControlledSource Storybook

Props

Prop	Type	Default	Description
`alphaLabel`	`string \| undefined`	—	Alpha slider `aria-label`.
`children`	`ReactNode`	—	`ColorPicker.Saturation` / `.HueSlider` / `.Swatches` etc.
`defaultValue`	`string \| undefined`	`'#FFFFFF'`	Uncontrolled initial value.
`disabled` system	`boolean \| undefined`	—
`focusable`	`boolean \| undefined`	`true`	Whether slider thumbs are keyboard-focusable.
`format`	`ColorFormat \| undefined` hex · hexa · rgb · rgba · hsl · hsla	`'hex'`	Output color format. Alpha formats (hexa / rgba / hsla) also render the alpha slider.
`fullWidth` system	`boolean \| undefined`	`false`	Take 100% of the container width.
`hueLabel`	`string \| undefined`	—	Hue slider `aria-label`.
`name`	`string \| undefined`	—	Hidden input `name`, for uncontrolled form submission (web).
`onChange`	`((value: string) => void) \| undefined`	—	Called on every value change while dragging / typing.
`onChangeEnd`	`((value: string) => void) \| undefined`	—	Called once a slider drag / keyboard change finishes.
`onColorSwatchClick`	`((color: string) => void) \| undefined`	—	Called when a swatch is clicked.
`saturationLabel`	`string \| undefined`	—	Saturation area `aria-label`.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Controls the overall width and the height of the saturation / slider areas.
`styles` system	`SlotStyles<ColorPickerStyles> \| undefined`	—	Per-slot style sugar — shared to the parts.
`swatches`	`string[] \| undefined`	—	Predefined colors shown as a swatch grid below the picker.
`swatchesPerRow`	`number \| undefined`	`7`	Number of swatches per row (drives the auto swatch cell size).
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`value`	`string \| undefined`	—	Controlled value (any valid CSS color string).
`withPicker`	`boolean \| undefined`	`true`	When false only the swatch grid is shown — no saturation or hue controls.

Style slots

Every part of ColorPicker can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`alphaSlider`	`styles={{ alphaSlider: { … } }}`
`hueSlider`	`styles={{ hueSlider: { … } }}`
`preview`	`styles={{ preview: { … } }}`
`root`	`styles={{ root: { … } }}`
`saturation`	`styles={{ saturation: { … } }}`
`swatch`	`styles={{ swatch: { … } }}`
`swatches`	`styles={{ swatches: { … } }}`
`thumb`	`styles={{ thumb: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<(HTMLElement & TamaguiElementMethods) \| View> \| undefined`

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.