Color Picker

A Color Picker keeps color values in sync across React Aria color components. It makes building color pickers with custom layouts a breeze through composition.

Basic

The basic color picker allows users to select a color.

Preview

Code

Color Picker

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Color Picker's decked out with several components to make it bangin'.

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

Color Field

A color field allows users to adjust a hex color or fine-tune individual color channels, offering precise control over color customization.

Select

Select a start and end date, perfect for booking a vacation or setting periods efficiently, streamlining the process of defining time spans with ease.

Popover

Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

And next, you can copy the code below and paste it into your dopest component folder.

Enable Format Selection

Enable users to select the format of the color value (e.g., RGB, HSL).

Preview

Code

Enable Swatch

Enable a swatch view where users can see and pick from predefined colors.

Preview

Code

Custom Colors

Customize the available colors beyond the default Tailwind CSS zinc palette by using the colors prop.

Preview

Code

Combination

Combine both swatch and selection format options in the color picker.

Preview

Code

Label

Add a label to the color picker for better accessibility and user guidance.

Preview

Code

Theme Color

Description

Include a description to provide additional information or instructions.

Preview

Code

Theme Color

Snag a color for the app theme

Placeholder

Introduce a placeholder in the color picker for an intuitive user interface.

Preview

Code

Controlled

Control the selected color with the value prop to sync it with your application's state.

Preview

Code

hex#0D6DFD

hexa#0D6DFDFF

rgbrgb(13, 109, 253)

rgbargba(13, 109, 253, 1)

hslhsl(216, 98%, 52%)

hslahsla(216, 98%, 52%, 1)

hsbhsb(216, 94.99%, 99.04%)

hsbahsba(216, 94.99%, 99.04%, 1)

Disabled

Disable the color picker by setting the isDisabled prop, making it non-interactive.

Preview

Code

Color Picker

Props

Indeed, the ColorPicker component incorporates all standard props from react-aria-components along with these specialized props:

Property	Type	Optional
space	ColorSpace	Yes
enableColorSwatch	boolean	Yes
enableColorFormatSelection	boolean	Yes
isHex	boolean	Yes
label	string	Yes
description	string	Yes
errorMessage	string	Yes
placeholder	string	Yes
colors	string[]	Yes
isDisabled	boolean	Yes
className	string	Yes
trigger	'color-picker' \| 'color-field'	Yes
enableColorField	boolean	Yes

Dropdown Color Field