Color picker

‮Color input built on the native color picker.‬

‮Browsers‬: Chrome 123+Firefox 121+Safari 17.5+
‮Tier‬: 1
‮Bundle compressed‬: 1.21 kB
‮Forced layout budget‬: 0 ms
‮Axe budget‬: 0
‮SSR compatible‬: ‮Yes‬
‮Published contract‬: ‮Test harness‬

‮Playground‬

Color Picker

Pick color

React

CSS

Tailwind

import { ColorPicker } from "@gunkin/uiify";

export default function Example() {
  return <ColorPicker className="" defaultValue="#2563eb" id="color-picker" label="Brand color" name="brand-color" />;
}

/* Text fields — Input and Textarea share the same surface. Invalid state keys
   off the [data-invalid] attribute the components emit. Textarea autosize uses
   the native field-sizing (Chrome 123+) when the component sets data-autosize. */

@layer components {
  :where([data-uiify-input], [data-uiify-textarea]) {
    display: block;
    inline-size: 100%;
    max-inline-size: 24rem;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background-color: var(--card);
    color: var(--foreground);
    font-size: var(--uiify-control-text);
    line-height: var(--leading-normal);
    transition: var(--transition-colors);
  }

  :where([data-uiify-input], [data-uiify-textarea])::placeholder {
    color: var(--muted-foreground);
  }

  :where([data-uiify-input], [data-uiify-textarea]):focus-visible {
    border-color: var(--primary);
  }

  :where([data-uiify-input], [data-uiify-textarea]):disabled,
  :where([data-uiify-input], [data-uiify-textarea])[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  :where([data-uiify-input], [data-uiify-textarea])[data-invalid],
  :where([data-uiify-input], [data-uiify-textarea]):user-invalid {
    border-color: var(--destructive);
  }

  :where([data-uiify-input], [data-uiify-textarea])[data-invalid]:focus-visible {
    outline-color: var(--destructive);
  }

  [data-uiify-textarea] {
    min-block-size: 4lh;
    resize: block;
  }

  [data-uiify-textarea][data-autosize] {
    field-sizing: content;
    resize: none;
  }

  [data-uiify-field] {
    display: grid;
    gap: var(--space-sm);
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  [data-uiify-field] [data-part="label"] {
    color: var(--foreground);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
  }

  [data-uiify-field] [data-part="label"][data-required]::after {
    content: " *";
    color: var(--destructive);
  }

  [data-uiify-field] [data-part="description"] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  [data-uiify-field] [data-part="error"] {
    margin: 0;
    color: var(--destructive);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  /* Shared presence fade when an error message is mounted. */
  @media (prefers-reduced-motion: no-preference) {
    [data-uiify-field] [data-part="error"] {
      transition: opacity var(--duration-fast) var(--ease-out);
    }

    @starting-style {
      [data-uiify-field] [data-part="error"] {
        opacity: 0;
      }
    }
  }
}

/* Field supplies the label and read-only text input; color input overlays it. */

@layer components {
  [data-uiify-color-picker] [data-part="surface"] {
    position: relative;
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  [data-uiify-color-picker] [data-part="control"] {
    padding-inline-end: calc(var(--space-md) + 2rem);
  }

  [data-uiify-color-picker] [data-part="surface"]::before,
  [data-uiify-color-picker] [data-part="surface"]::after {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 11px;
    inline-size: 24px;
    block-size: 24px;
    margin-block: auto;
    border-radius: var(--radius-lg);
    corner-shape: squircle;
    content: "";
    z-index: 1;
    pointer-events: none;
  }

  [data-uiify-color-picker] [data-part="surface"]::before {
    background: conic-gradient(
        var(--muted) 25%,
        transparent 0 50%,
        var(--muted) 0 75%,
        transparent 0
      )
      0 0 / 17px 10px repeat;
  }

  [data-uiify-color-picker] [data-part="surface"]::after {
    background: linear-gradient(var(--uiify-color-picker-value), var(--uiify-color-picker-value));
  }

  [data-uiify-color-picker] [data-part="native-input"] {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
  }

  [data-uiify-color-picker]
    [data-part="surface"]:has([data-part="native-input"]:focus-visible)
    [data-part="control"] {
    border-color: var(--primary);
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 16%, transparent);
  }

  [data-uiify-color-picker]
    [data-part="surface"]:has([data-part="native-input"][aria-invalid="true"]:focus-visible)
    [data-part="control"] {
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--destructive) 20%, transparent);
  }

  [data-uiify-color-picker]
    [data-part="surface"]:has([data-part="native-input"]:disabled)
    [data-part="control"] {
    cursor: not-allowed;
  }

  [data-uiify-color-picker] [data-part="native-input"]:disabled {
    cursor: not-allowed;
  }

  [data-uiify-color-picker] [data-part="label"][data-disabled] {
    color: var(--muted-foreground);
    cursor: not-allowed;
  }
}

import { ColorPicker } from "@gunkin/uiify";

export default function Example() {
  return (
    <ColorPicker
      className={
        "grid gap-sm w-full max-w-96 [&>[data-part=label]]:text-sm [&>[data-part=label]]:font-medium [&>[data-part=l" +
        "abel]]:[line-height:var(--leading-normal)] [&>[data-part=label]]:text-foreground [&_[data-part=control]]:bl" +
        "ock [&_[data-part=control]]:w-full [&_[data-part=control]]:py-sm [&_[data-part=control]]:px-md [&_[data-par" +
        "t=control]]:border-[length:var(--border-width)] [&_[data-part=control]]:border-solid [&_[data-part=control]" +
        "]:border-input [&_[data-part=control]]:rounded-md [&_[data-part=control]]:[corner-shape:squircle] [&_[data-" +
        "part=control]]:bg-card [&_[data-part=control]]:text-foreground [&_[data-part=control]]:[font-size:var(--uii" +
        "fy-control-text)] [&_[data-part=control]]:[line-height:var(--leading-normal)] [&_[data-part=surface]]:relat" +
        "ive [&_[data-part=surface]]:w-full [&_[data-part=surface]]:[max-inline-size:24rem] [&_[data-part=control]]:" +
        "pe-[calc(var(--space-md)_+_2rem)] [&_[data-part=surface]::before]:absolute [&_[data-part=surface]::before]:" +
        "[inset-block:0] [&_[data-part=surface]::before]:[inset-inline-end:11px] [&_[data-part=surface]::before]:siz" +
        "e-6 [&_[data-part=surface]::before]:my-auto [&_[data-part=surface]::before]:rounded-lg [&_[data-part=surfac" +
        "e]::before]:[corner-shape:squircle] [&_[data-part=surface]::before]:content-[''] [&_[data-part=surface]::be" +
        "fore]:z-[1] [&_[data-part=surface]::before]:pointer-events-none [&_[data-part=surface]::before]:[background" +
        ":conic-gradient(var(--muted)_25%,transparent_0_50%,var(--muted)_0_75%,transparent_0)_0_0/17px_10px_repeat] " +
        "[&_[data-part=surface]::after]:absolute [&_[data-part=surface]::after]:[inset-block:0] [&_[data-part=surfac" +
        "e]::after]:[inset-inline-end:11px] [&_[data-part=surface]::after]:size-6 [&_[data-part=surface]::after]:my-" +
        "auto [&_[data-part=surface]::after]:rounded-lg [&_[data-part=surface]::after]:[corner-shape:squircle] [&_[d" +
        "ata-part=surface]::after]:content-[''] [&_[data-part=surface]::after]:z-[1] [&_[data-part=surface]::after]:" +
        "pointer-events-none [&_[data-part=surface]::after]:[background:linear-gradient(var(--uiify-color-picker-val" +
        "ue),var(--uiify-color-picker-value))] [&_[data-part=native-input]]:absolute [&_[data-part=native-input]]:in" +
        "set-0 [&_[data-part=native-input]]:w-full [&_[data-part=native-input]]:h-full [&_[data-part=native-input]]:" +
        "m-0 [&_[data-part=native-input]]:opacity-0 [&_[data-part=native-input]]:z-[2] [&_[data-part=native-input]]:" +
        "cursor-pointer [&_[data-part=surface]:has([data-part=native-input]:focus-visible)_[data-part=control]]:bord" +
        "er-primary [&_[data-part=surface]:has([data-part=native-input]:focus-visible)_[data-part=control]]:[box-sha" +
        "dow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [&_[data-part=surface]:has([" +
        "data-part=native-input]:disabled)_[data-part=control]]:cursor-not-allowed [&_[data-part=native-input]:disab" +
        "led]:cursor-not-allowed [&_[data-part=label][data-disabled]]:text-muted-foreground [&_[data-part=label][dat" +
        "a-disabled]]:cursor-not-allowed"
      }
      defaultValue="#2563eb"
      id="color-picker"
      label="Brand color"
      name="brand-color"
    />
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('grid gap-sm w-full max-w-96 [&>[data-part=label]]:text-sm [&>[data-part=label]]:font-medium [&>[data-part=label]]:[line-height:var(--leading-normal)] [&>[data-part=label]]:text-foreground [&_[data-part=control]]:block [&_[data-part=control]]:w-full [&_[data-part=control]]:py-sm [&_[data-part=control]]:px-md [&_[data-part=control]]:border-[length:var(--border-width)] [&_[data-part=control]]:border-solid [&_[data-part=control]]:border-input [&_[data-part=control]]:rounded-md [&_[data-part=control]]:[corner-shape:squircle] [&_[data-part=control]]:bg-card [&_[data-part=control]]:text-foreground [&_[data-part=control]]:[font-size:var(--uiify-control-text)] [&_[data-part=control]]:[line-height:var(--leading-normal)] [&_[data-part=surface]]:relative [&_[data-part=surface]]:w-full [&_[data-part=surface]]:[max-inline-size:24rem] [&_[data-part=control]]:pe-[calc(var(--space-md)_+_2rem)] [&_[data-part=surface]::before]:absolute [&_[data-part=surface]::before]:[inset-block:0] [&_[data-part=surface]::before]:[inset-inline-end:11px] [&_[data-part=surface]::before]:size-6 [&_[data-part=surface]::before]:my-auto [&_[data-part=surface]::before]:rounded-lg [&_[data-part=surface]::before]:[corner-shape:squircle] [&_[data-part=surface]::before]:z-[1] [&_[data-part=surface]::before]:pointer-events-none [&_[data-part=surface]::before]:[background:conic-gradient(var(--muted)_25%,transparent_0_50%,var(--muted)_0_75%,transparent_0)_0_0/17px_10px_repeat] [&_[data-part=surface]::after]:absolute [&_[data-part=surface]::after]:[inset-block:0] [&_[data-part=surface]::after]:[inset-inline-end:11px] [&_[data-part=surface]::after]:size-6 [&_[data-part=surface]::after]:my-auto [&_[data-part=surface]::after]:rounded-lg [&_[data-part=surface]::after]:[corner-shape:squircle] [&_[data-part=surface]::after]:z-[1] [&_[data-part=surface]::after]:pointer-events-none [&_[data-part=surface]::after]:[background:linear-gradient(var(--uiify-color-picker-value),var(--uiify-color-picker-value))] [&_[data-part=native-input]]:absolute [&_[data-part=native-input]]:inset-0 [&_[data-part=native-input]]:w-full [&_[data-part=native-input]]:h-full [&_[data-part=native-input]]:m-0 [&_[data-part=native-input]]:opacity-0 [&_[data-part=native-input]]:z-[2] [&_[data-part=native-input]]:cursor-pointer [&_[data-part=surface]:has([data-part=native-input]:focus-visible)_[data-part=control]]:border-primary [&_[data-part=surface]:has([data-part=native-input]:focus-visible)_[data-part=control]]:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [&_[data-part=surface]:has([data-part=native-input]:disabled)_[data-part=control]]:cursor-not-allowed [&_[data-part=native-input]:disabled]:cursor-not-allowed [&_[data-part=label][data-disabled]]:text-muted-foreground [&_[data-part=label][data-disabled]]:cursor-not-allowed');

@source inline("[&_[data-part=surface]::before]:content-[''] [&_[data-part=surface]::after]:content-['']");

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

‮API‬

`ColorPicker`

‮Prop‬	‮Type‬	‮Default‬	‮Description‬
`label`*	`string`	—	‮Visible label for the native color input.‬
`value`	`string`	—	‮Current CSS color string; makes the picker controlled.‬
`defaultValue`	`string`	—	‮Starting CSS color string for uncontrolled use, such as "#2563eb".‬
`onValueChange`	`(value: string) => void`	—	‮Called with the selected color when the native picker changes.‬
`onChange`	`ChangeEventHandler<HTMLInputElement>`	—	‮Native color-input change event; read the color from currentTarget.value.‬
`alpha`	`boolean`	`false`	‮Passes the native alpha hint. Browser support and picker UI vary.‬
`colorSpace`	`"limited-srgb" \| "display-p3"`	`"limited-srgb"`	‮Selects the native color-space hint passed to the input.‬
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	‮Replace the rendered element while keeping behavior and accessibility wiring.‬

‮Keyboard‬

‮Key‬	‮Action‬
`Tab`	‮Focus the color input‬
`Enter` / `Space`	‮Open the native picker‬

‮Accessibility‬

‮A transparent native <input type="color"> sits above a Field value surface. It is the only form control, stays keyboard-operable, is labeled by Field.Label and opens the system picker; onChange still receives the native event. Before hydration the picker works, but the displayed value stays at its server value. Alpha and display-p3 hints depend on browser support.‬

‮Styling hooks‬

data-uiify-color-pickerdata-uiify-fielddata-uiify-inputdata-disableddata-partdata-value--uiify-color-picker-value

‮Framework‬

‮Style‬

‮Theme‬

‮Language‬