ColorInput – Once UI

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

#4287f5 80%

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

Localisation

label and description are yours to translate. The field's own controls take labels: remove for the clear button ("Remove"), adjustOpacity for the opacity button ("Adjust opacity") and opacity for its slider ("Opacity"). Whatever you leave out stays English.

Tsx

<ColorInput
  id="brand-colour"
  label={t("brandColour")}
  value={colour}
  onChange={setColour}
  labels={{ remove: t("remove") }}
/>

size="xxs" draws a 32px field, the height of a size="s" Button. The label shows as the placeholder until a colour is picked.

Toolbar size

Brand Color

#4287f5

const [color, setColor] = useState("#4287f5");

<ColorInput
  id="brand-color"
  label="Brand Color"
  size="xxs"
  value={color}
  onChange={setColor}
/>

Props

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

	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
labels The clear and opacity controls' text, to translate them.	ColorInputLabels	—
…and every InputProps prop	inherited	—