1. Components
  2. Colors
  3. Color Picker

Color Picker

A ColorPicker combines a swatch with a customizable popover for editing a color.

Aria docsAria API ReferenceReport an issueEdit this page
<ColorPicker defaultValue="#5100FF" />

Installation

npx dotui-cli@latest add color-picker

Usage

Use a ColorPicker to allow users to select and edit a color in an overlay.

Options

ColorPicker accepts all button options.

<ColorPicker size="sm" shape="rectangle">
Fill color
</ColorPicker>

Unontrolled

An initial, uncontrolled value can be provided to the ColorPicker using the defaultValue prop.

<ColorPicker defaultValue="#5100FF" />

Controlled

Use the value and onChange props to control the color picker.

const [value, setValue] = React.useState(parseColor("hsl(25, 100%, 50%)"));
return <ColorPicker value={value as Color & string} onChange={setValue} />;

Composition

If you need to customize things further, you can drop down to the composition level.

<ColorPickerRoot defaultValue="#5100FF">
  <DialogRoot>
    <Button><ColorSwatch /></Button>
    <Dialog>
      <ColorEditor />
    </Dialog>
  </DialogRoot>
</ColorPickerRoot>

API Reference

ColorPicker extends and merges the props of the Button component.

PropTypeDefaultDescription
value
string | Color | null
-
The current value (controlled).
defaultValue
string | Color | null
-
The default value (uncontrolled).
children
ReactNode | (values: T & {defaultChildren: ReactNode | undefined}) => ReactNode
-
The children of the component. A function may be provided to alter the children based on component state.
EventTypeDescription
onChange
(value: Color) => void
Handler that is called when the value changes.

Last updated on 10/11/2024

Color SwatchDropzone