ColorInput

Updated: May 12, 2025

The ColorInput component provides an enhanced color picker that displays the selected color as a visual preview alongside its hex value. It extends the standard HTML color input with a more user-friendly interface.

ColorInput

Brand Color

#4287f5

const [colorValue, setColorValue] = useState("#4287f5");

const handleColorChange = (value: string) => {
  setColorValue(value);
};

<ColorInput
  id="color-input-example"
  label="Brand Color"
  value={colorValue}
  onChange={handleColorChange}
/>

Features

Color Preview: Shows a visual preview of the selected color
Hex Value Display: Displays the hex code of the selected color
Native Color Picker: Uses the browser's native color picker for selection
Reset Option: Includes a button to clear the selected color
Alpha Support: Optional opacity/transparency control via dropdown slider

Alpha support

Enable alpha channel (transparency) control by setting supportAlpha to true. This adds an opacity button that opens a dropdown with a slider to adjust transparency from 0-100%.

With alpha

Brand Color

rgba(66, 135, 245, 0, 8)

const [colorValue, setColorValue] = useState("rgba(66, 135, 245, 0.8)");

const handleColorChange = (value: string) => {
  setColorValue(value);
};

<ColorInput
  id="color-input-alpha-example"
  label="Brand Color"
  value={colorValue}
  onChange={handleColorChange}
  supportAlpha
/>

When supportAlpha is enabled:

The value is automatically converted to rgba(r, g, b, a) format
An opacity icon appears in the input suffix
Clicking the icon opens a dropdown with a slider (0-100% opacity)
The color preview shows transparency
The display text shows RGBA values

Props

The ColorInput component extends the standard Input component props with the following modifications:

Prop	Type	Default
valuerequired The current colour, as hex or rgba. Controlled — pair it with onChange.	string	—
onChangerequired Receives the colour string directly, not a DOM event.	(value: string) => void	—
supportAlpha Adds an opacity slider and switches the value to rgba().	boolean	false
…and every InputProps prop	inherited	—

Form ControlsChip

Form ControlsDateInput

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club