ColorInput

Hex color picker input that combines a swatch trigger, popover picker, and optional text input.

Overview

ColorInput is the shared-ui color picker used in brand configuration, template builders, and tagging flows.

It combines three things:

a clickable color swatch
a popover HexColorPicker
an optional inline hex text input

This makes it a better fit than a plain text field when users need to both see and edit a color value.

Basic Usage

import { ColorInput } from '@fsai/shared-ui';

<ColorInput
  label="Primary Color"
  color={value}
  onChange={setValue}
  onBlur={handleBlur}
/>

The default behavior shows both the swatch and the hex input.

Swatch-Only Usage

Use withInput={false} when the color control needs to stay very compact:

<ColorInput
  color={value}
  onChange={setValue}
  withInput={false}
/>

This pattern is common in dense builders and inline creation flows.

Props

Prop	Type	Default	Description
`color`	`string \| null`	—	Current hex color value.
`onChange`	`(color: string) => void`	—	Called whenever the picker or hex input changes.
`label`	`string`	—	Optional field label rendered with the shared `Label` primitive.
`withInput`	`boolean`	`true`	Shows or hides the inline `HexColorInput`.
`onBlur`	`(color?: string \| null) => void`	—	Called when the inline hex input loses focus.
`disabled`	`boolean`	—	Disables the swatch trigger and input.
`onClose`	`(color?: string \| null) => void`	—	Called when the popover closes.

Common Usage Patterns

Brand And Theme Settings

Use the default full control when users need to pick a color visually and verify the exact hex value.

This is the main settings-style usage:

visible label
swatch trigger
editable hex input
validation handled by the parent form

Dense Builder Controls

Use withInput={false} in tight control rows where the surrounding UI already provides enough context and the full text input would take too much space.

Inline Tag Or Category Creation

Use the compact swatch-only mode when color is secondary to a primary text field and should not dominate the form.

Brand Dashboard Usage Patterns

Representative usages:

Pattern	Path	Notes
Brand appearance settings	`fsai/apps/brand-dashboard/src/pages/BrandWorkspaceSettings/BrandAppearanceSettings/BrandAppearanceSettings.tsx`	Canonical labeled settings usage with `react-hook-form`, validation, reset, and save actions around the component.
Email builder style controls	`fsai/apps/brand-dashboard/src/pages/EmailBuilder/EmailEditorSidebar/EmailEditorSidebar.components.tsx`	Compact builder usage with `withInput={false}` inside a dense control row.
Inline tagging forms	`fsai/apps/brand-dashboard/src/components/Tagging/Tagging.components.tsx`	Shows the compact swatch-only pattern next to a text input in a small creation form.
Studio template editors	`fsai/apps/brand-dashboard/src/pages/StudioEmailTemplates/StudioEmailTemplates.components.tsx`	Another theme-editing style flow with multiple color fields.
QR template editor	`fsai/apps/brand-dashboard/src/pages/StudioQrTemplates/QrTemplateModal.tsx`	Uses color picking in a richer template configuration modal.

Important Conventions

ColorInput is optimized for hex color editing, not arbitrary CSS color strings.
The visible text entry is optional; the popover picker is always driven by the swatch trigger.
Validation is usually handled by the parent form, not internally by ColorInput.
Use withInput={false} intentionally for dense UIs, not as the default in standard settings forms.
The component composes shared Label and Popover primitives rather than behaving like a plain native <input type="color">.

Guidelines

Do use ColorInput when users need both visual picking and explicit hex editing
Do keep the default input visible in settings-style forms
Do pair it with external validation when the stored value must be a valid hex color
Do use withInput={false} in tight toolbars, builders, or inline creation forms
Don't replace a normal text field with ColorInput unless the value is actually a user-facing color choice
Don't treat it like a generic design-token selector or theme system abstraction

ColorInput

On this page