REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

ColorPicker

A color selection component with swatches, preview, and hex input.

Example

Preview

Code

Props

ColorPicker Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the color picker container.

value

string

—

The currently selected color value (hex string).

onChange

(color: string) => void

—

Callback invoked when a color is selected.

defaultValue

string

—

The initial color value for uncontrolled usage.

ColorPickerTrigger Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the trigger button.

ColorPickerContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the color picker content area.

ColorPickerSwatch Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for a color swatch.

color *

string

—

The hex color value this swatch represents.

ColorPickerBox Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the color box.

size

number

—

Size of the saturation-value square in pixels. Default: 200.

ColorPickerSlider Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the hue slider.

height

number

—

Height of the hue slider in pixels. Default: 200.

width

number

—

Width of the hue slider in pixels. Default: 24.

ColorPickerInput Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the hex input field.

Usage Guidelines

When to use

Use ColorPicker for selecting colors in theme editors, design tools, or customization interfaces.

Best practices

•

Provide preset swatches for commonly used colors in your design system.

•

Validate hex input to prevent invalid color values.

•

Show a live preview of the selected color in the trigger.

Accessibility

ColorPicker swatches announce their color name. The hex input accepts typed values. The trigger displays the current color with an accessible label.

Related Components

Input

A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.

Popover

A positioned overlay that appears relative to a trigger element.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License