Design System/Atoms/Color Input

Color Input

Compact inline color input combining a swatch trigger, hex text field, and optional opacity control. Designed for designer property panels.

When To Use

  • Use Color Input when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Props

value, onChange, opacity, onOpacityChange, className, disabled

Example Code

import { ColorInput } from "@hilum/ui"

const [color, setColor] = React.useState("#c100f1")

<ColorInput value={color} onChange={setColor} />

Color Input

Basic

Swatch + hex field

With opacity

Adds an opacity percentage field

Disabled

Non-interactive state