# ColorInput


## Anatomy

```tsx
import { ColorInput } from "chroma-panel";

<ColorInput defaultValue="#3366cc" onChangeComplete={(c) => save(c.hex)} />;
```

`ColorInput` takes every prop `ChromaPanel` takes, plus the popover and form
props below. It also drops into a form like an `<input>` — see
[forms](/react/handbook/forms).

## Demo

<ComponentPreview name="color-input-demo" />

## API reference

### Props

<PropsTable name="ColorInput" />