Color Picker

A controlled hex color picker combining a native browser color input with a manual hex text field and optional preset swatches. Validates and normalises hex values on blur.

Selected: #3b82f6

import { ColorPicker } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add color-picker

Import

import.tsx

import { ColorPicker, ColorSwatch } from "@aetherstack/patterns"

Usage

color-picker.tsx

import * as React from "react"
import { ColorPicker } from "@aetherstack/patterns"

const PRESETS = ["#ef4444", "#3b82f6", "#22c55e", "#eab308"]

export function MyColorPicker() {
  const [color, setColor] = React.useState("#3b82f6")
  return (
    <ColorPicker
      value={color}
      onChange={setColor}
      presets={PRESETS}
    />
  )
}

Props

Prop	Type	Default	Description
value*	string	—	Current hex color value, e.g. "#3b82f6".
onChange*	(value: string) => void	—	Called with the new hex value whenever the color changes.
presets	string[]	—	Optional list of hex preset swatches to render below the input.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→The color preview button opens the native <input type="color"> — the native input is visually hidden but accessible.
→The text input has aria-label="Hex color value" for screen readers.
→Preset swatches are grouped with role="group" and each swatch carries aria-label and aria-pressed.
→Focus styles are preserved on the swatch buttons and text input.