Component

ColorPicker

Color selection with preset colors and custom color input.

tsx
import { ColorPicker, ColorSwatch, ColorPalette } from 'wss3-forge'

Usage

Includes preset color swatches

Supports custom hex input

ColorPalette for simple color selection

ColorSwatch for displaying a color


Examples

Basic ColorPicker

tsx
1const [color, setColor] = useState('#A35BFF')
2
3<ColorPicker
4 value={color}
5 onChange={setColor}
6 label="Brand color"
7/>

With Hex Input

tsx
1<ColorPicker
2 value={color}
3 onChange={setColor}
4 label="Custom color"
5 showInput
6/>

Custom Colors

tsx
1<ColorPicker
2 value={color}
3 onChange={setColor}
4 label="Theme color"
5 colors={['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff']}
6/>

Previous

Checkbox

Next

DatePicker

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.