ColorPicker

'use client';

import { ColorPicker } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function ColorPickerBasic() {
  const [color, setColor] = useState('#4f46e5');

  return (
    <div className="w-full max-w-60">
      <ColorPicker value={color} onValueChange={setColor} aria-label="Asosiy rang" />
    </div>
  );
}

ImportCopy Anchor Link

import { ColorPicker } from '@akhatmirzo/ui';

When to useCopy Anchor Link

• Users choose their own color — a brand color, a tag or category color, theme settings.
• When the palette is limited, pass a preset palette via swatches; free picking stays available.
• When users pick from only a handful of colors (5–6), a RadioGroup or a SegmentedControl with color samples is simpler.

AnatomyCopy Anchor Link

The trigger is a button styled like an Input: a color sample on the left and the hex text next to it. Clicking it opens a Popover:

1. Saturation area (2D) — the horizontal axis is saturation, the vertical axis is brightness.
2. Hue slider — the hue (0–360°), built with the Slider component.
3. Alpha slider — only with alpha.
4. Eyedropper — picks a color from the screen when the browser supports the EyeDropper API (Chromium for now); otherwise the button is hidden.
5. Hex input — a full 6 (or 8) digit hex applies right away; a short #abc applies on Enter or blur. Invalid text shows the error state and reverts to the previous color on blur.
6. Preset swatches (swatches).

The value always comes back as lowercase #rrggbb (onValueChange('#0ea5e9')). Picking white, black or gray keeps the hue, so the slider doesn't jump.

With FieldCopy Anchor Link

Inside a Field the trigger is named by the label plus the current color ("Brend rangi #0EA5E9"), and the description and error go into aria-describedby. name adds a hidden <input> for forms.

'use client';

import { ColorPicker, Field } from '@akhatmirzo/ui';

export default function ColorPickerWithField() {
  return (
    <div className="w-full max-w-60">
      <Field label="Brend rangi" description="Tugmalar va havolalarda ishlatiladi">
        <ColorPicker name="brand" defaultValue="#0ea5e9" />
      </Field>
    </div>
  );
}

AlphaCopy Anchor Link

With alpha the panel shows an alpha slider and the value becomes #rrggbbaa (#10b98180 — 50%). Color samples sit on a checkerboard.

'use client';

import { ColorPicker } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function ColorPickerAlpha() {
  const [color, setColor] = useState('#10b98180');

  return (
    <div className="flex w-full max-w-60 flex-col gap-2">
      <ColorPicker alpha value={color} onValueChange={setColor} aria-label="Fon rangi" />
      <p className="m-0 text-sm text-text-muted">
        Qiymat: <span className="font-mono text-text">{color}</span>
      </p>
    </div>
  );
}

SwatchesCopy Anchor Link

The default swatches are 10 colors from the library palette (exported as defaultColorSwatches). Pass your own palette, or [] to hide them.

'use client';

import { ColorPicker } from '@akhatmirzo/ui';

// Faqat brend palitrasidagi ranglar
const brand = ['#4f46e5', '#0ea5e9', '#10b981', '#f59e0b', '#e11d48'];

export default function ColorPickerSwatches() {
  return (
    <div className="w-full max-w-60">
      <ColorPicker swatches={brand} defaultValue="#10b981" aria-label="Teg rangi" />
    </div>
  );
}

Sizes and statesCopy Anchor Link

size matches the Input height: sm 32px, md 40px (default), lg 48px. disabled doesn't open; invalid (or Field error) shows a red border.

'use client';

import { ColorPicker } from '@akhatmirzo/ui';

export default function ColorPickerSizes() {
  return (
    <div className="flex w-full max-w-60 flex-col gap-3">
      <ColorPicker size="sm" aria-label="Kichik" />
      <ColorPicker aria-label="O'rtacha" />
      <ColorPicker size="lg" aria-label="Katta" />
      <ColorPicker disabled aria-label="O'chirilgan" />
    </div>
  );
}

PropsCopy Anchor Link

Other <button> attributes and ref go to the trigger.

labelsCopy Anchor Link

Data attributesCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

• Trigger — a plain <button>; inside a Field it's named by the label plus the current hex, otherwise "Rang tanlash, #4F46E5" (change with aria-label or labels.trigger).
• 2D area — role="slider" with aria-valuenow (saturation) and an aria-valuetext that covers both axes: "to'yinganlik 80%, yorqinlik 60%".
• Hue and alpha — the Slider component: role="slider" with aria-valuetext ("210°", "50%").
• Swatches — buttons inside a role="group", each named by its hex and using aria-pressed.
• Eyedropper — shown only when the API exists (hidden on the server and in unsupported browsers), aria-label="Ekrandan rang olish".
• Color isn't the only signal — the selected swatch gets an extra ring, and the trigger also shows the hex text.