1. Components
  2. Colors
  3. Color Swatch Picker

Color Swatch Picker

A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.

Aria docsReport an issueEdit this page
<ColorSwatchPicker defaultValue="#fff">
  <ColorSwatchPickerItem color="#fff" />
  <ColorSwatchPickerItem color="#A00" />
  <ColorSwatchPickerItem color="#f80" />
  <ColorSwatchPickerItem color="#080" />
  <ColorSwatchPickerItem color="#08f" />
  <ColorSwatchPickerItem color="#088" />
  <ColorSwatchPickerItem color="#008" />
</ColorSwatchPicker>

Installation

npx dotui-cli@latest add color-swatch-picker

Anatomy

import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from "@/components/core/color-swatch-picker";
 
<ColorSwatchPicker>
  <ColorSwatchPickerItem color="#A00" />
  <ColorSwatchPickerItem color="#f80" />
</ColorSwatchPicker>;

Controlled

"use client";

import React from "react";
import { parseColor, type Color } from "react-aria-components";
import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from "@/components/dynamic-core/color-swatch-picker";

export default function Demo() {
  const [value, setValue] = React.useState<Color>(parseColor("#f80"));
  return (
    <ColorSwatchPicker defaultValue="#fff" value={value} onChange={setValue}>
      <ColorSwatchPickerItem color="#fff" />
      <ColorSwatchPickerItem color="#A00" />
      <ColorSwatchPickerItem color="#f80" />
      <ColorSwatchPickerItem color="#080" />
      <ColorSwatchPickerItem color="#08f" />
      <ColorSwatchPickerItem color="#088" />
      <ColorSwatchPickerItem color="#008" />
    </ColorSwatchPicker>
  );
}

Label

By default, ColorSwatchPicker has an aria-label with the localized string "Color swatches". This can be overridden with a more specific accessibility label using the aria-label or aria-labelledby props. All labels should be localized.

Options

Disabled

import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from "@/components/dynamic-core/color-swatch-picker";

export default function Demo() {
  return (
    <ColorSwatchPicker>
      <ColorSwatchPickerItem color="#fff" isDisabled />
      <ColorSwatchPickerItem color="#A00" />
      <ColorSwatchPickerItem color="#f80" isDisabled />
      <ColorSwatchPickerItem color="#080" />
      <ColorSwatchPickerItem color="#08f" isDisabled />
      <ColorSwatchPickerItem color="#088" />
      <ColorSwatchPickerItem color="#008" />
    </ColorSwatchPicker>
  );
}

API Reference

PropTypeDefaultDescription
childrenReactNode-The children of the component.
layout'grid' | 'stack''grid'Whether the items are arranged in a stack or grid.
valuestring | Color-The current value (controlled).
defaultValuestring | Color-The default value (uncontrolled).
classNamestring | (values: ColorSwatchPickerRenderProps & {defaultClassName: string | undefined}) => string-The CSS className for the element. A function may be provided to compute the class based on component state.
styleCSSProperties | (values: ColorSwatchPickerRenderProps & {defaultStyle: CSSProperties}) => CSSProperties | undefined-The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onChange(value: Color) => voidHandler that is called when the value changes.

Last updated on 6/12/2024

Color SwatchColor Picker
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.