# ColorPicker

- **what it is**: a saturation and brightness square, the hue and the alpha as `Slider`s, and a swatch
- **its own props**: `value`, `hasAlpha`, `disabled`, `type`
- **example**: `color-picker`

From the [Composites](/docs/packages/ui#composites) section of [`@aweftjs/ui`](/docs/packages/ui).

## Example

Every state, type and size, rendered in light and dark from [`recipes/ui/examples/color-picker.example.tsx`](/docs/recipes/ui/files/examples/color-picker.example.tsx):

```tsx
// ColorPicker: a saturation and brightness square, the hue and the alpha on real range inputs,
// and a swatch, with and without the alpha channel.

import { mutable } from '@aweftjs/core';
import { ColorPicker, h } from '@aweftjs/ui';

import { ids } from '../example.ts';
import type { ExampleComponent } from '../example.ts';

export const name = 'ColorPicker';
export const order = 45;

export const Example: ExampleComponent = (props) => {
	const at = ids(props.mode);
	const picked = mutable('#1b6ef3');

	return (
		<div theme="column">
			<p theme={['text', 'sm', 'muted']}>The plane and the hue, because there is no alpha</p>
			<ColorPicker value={picked} hasAlpha={false} id={at('picker')} />
			<span theme={['text', 'sm', 'muted']} id={at('picked')}>{picked}</span>

			<p theme={['text', 'sm', 'muted']}>The opacity as well, with it</p>
			<ColorPicker value={mutable('rgba(27, 110, 243, 0.5)')} id={at('picker-alpha')} />

			<ColorPicker value={mutable('#1b6ef3')} disabled={true} id={at('picker-disabled')} />
		</div>
	);
};
```