ColorInput

Needs review
WCAG 2.2 evidence
RTL

A hex colour field with a swatch and a picker popover. Built on React Aria ColorField: the label, helper and error are linked to the input (WCAG 1.3.1, 3.3.2); typing a hex value and Enter (or leaving the field) commits it; arrow keys step the value; invalid states set aria-invalid and show the error with an icon (1.4.1, 3.3.1). The swatch previews the typed colour and turns empty while the text is not a colour; the value is always shown as text (left-to-right, also in RTL layouts), so colour is never the only identifier. The chevron button (and Alt + Arrow Down in the field) opens a ColorPicker in a popover dialog: focus moves into it, Escape closes it and focus returns to the button (2.1.1, 2.1.2, 2.4.3). Every picker drag has a keyboard or typed alternative (2.5.7). Paste and autofill are never blocked. Consumer duties: label and error wording, validate / isRequired rules, and presets with meaningful names.

import { ColorInput } from "@nexera-ui/react";

Loading example…

6
examples: 29
props: 7
live controls: 1
platform: 10
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

Generated code

import { ColorInput } from "@nexera-ui/react";

<ColorInput />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

With presets

A compact picker with named presets in the popover (any ColorPicker inside stays in sync with the field).

Loading example…

app.tsx

import { ColorInput, ColorPicker } from "@nexera-ui/react";

<ColorInput
  label="Brand color"
  defaultValue="#04855D"
  description="Used for buttons, links and the sidebar"
  picker={
    <ColorPicker
      aria-label="Brand color"
      mode="compact"
      presets={[
        { color: "#04855D", name: "Emerald 600" },
        { color: "#2563EB", name: "Blue 600" },
        { color: "#D97706", name: "Amber 600" },
        { color: "#7C3AED", name: "Violet 600" },
      ]}
    />
  }
/>;

Controlled

Controlled value: the committed colour is shown under the field.

Loading example…

app.tsx

import { useState } from "react";
import { type Color } from "react-aria-components";
import { ColorInput } from "@nexera-ui/react";

export function Controlled() {
  const [value, setValue] = useState<string | Color | null>("#2563EB");
  return (
    <div className="flex flex-col gap-2">
      <ColorInput
        label="Brand color"
        defaultValue="#04855D"
        description="Used for buttons, links and the sidebar"
        value={value}
        onChange={setValue}
      />
      <p className="m-0 text-body-small text-secondary">
        Value: {value === null ? "none" : typeof value === "string" ? value : value.toString("hex")}
      </p>
    </div>
  );
}

States

Figma Error (isInvalid + errorMessage) and Disabled (isDisabled).

Loading example…

app.tsx

import { ColorInput } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-6">
      <ColorInput
        defaultValue="#04855D"
        label="Accent color"
        isInvalid
        errorMessage="Enter a 6-digit hex code, like #04855D"
        description={undefined}
      />
      <ColorInput
        defaultValue="#04855D"
        description="Used for buttons, links and the sidebar"
        label="Disabled color"
        isDisabled
      />
      <ColorInput
        defaultValue="#04855D"
        description="Used for buttons, links and the sidebar"
        label="Read-only color"
        isReadOnly
      />
    </div>
  );
}

Long label

Long labels and helper texts wrap.

Loading example…

app.tsx

import { ColorInput } from "@nexera-ui/react";

<ColorInput
  label="Primary brand color used for buttons, links, focus rings and the selected sidebar item"
  defaultValue="#04855D"
  description="Changing it updates every product surface after the next deployment; check the contrast on white and on the page background."
/>;

Right to left

Right-to-left: label and helper align to the right; the hex value stays left-to-right.

Loading example…

app.tsx

import { ColorInput } from "@nexera-ui/react";

<ColorInput
  label="لون العلامة"
  defaultValue="#04855D"
  description="يستخدم للأزرار والروابط والشريط الجانبي"
/>;

Props 29

Press "Try it" on a card to load that prop into the playground.

valueNexera

string | Color | null

The colour: a CSS string, a React Aria Color, or null for empty. Shown as hex text with a swatch. Pair it with onChange.

defaultValueNexera

string | Color | null

The initial colour (uncontrolled). Empty when omitted.

onChangeNexera

(color: Color | null) => void

Called with the new Color (or null when cleared) when a typed value is committed (Enter or blur) and on every change in the picker.

descriptionNexera

ReactNode

Helper text under the field, linked with aria-describedby. Shown when provided.

errorMessageNexera

ReactNode | ((validation: ValidationResult) => ReactNode)

Error text under the field, shown with an icon while the field is invalid and linked with aria-describedby. Say what is wrong and how to fix it.

placeholderNexera

string

Example value shown while empty, for example "#04855D". Never the only label.

isOpenNexera

boolean

Whether the picker popover is open. Use with onOpenChange.

defaultOpenNexera

boolean

Whether the picker is open on first render (uncontrolled).

onOpenChangeNexera

(isOpen: boolean) => void

Called when the picker opens or closes.

pickerNexera

ReactNode

Content of the popover. Defaults to a full ColorPicker named after the label. Pass your own <ColorPicker mode="compact" presets={...} aria-label="..." /> to customise it: any ColorPicker inside stays in sync with the field.

pickerLabelNexera

string

Accessible name of the chevron button and of the popover dialog. Translate it.

inputRefNexera

Ref<HTMLInputElement>

Ref to the native <input> (the root ref points to the field wrapper).

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the root.

labelNexera

FieldLabelContent

Visible label, linked to the control by React Aria (WCAG 1.3.1, 3.3.2). Short noun, for example "Work email". Wraps instead of truncating. A placeholder is never a substitute for it. Not set: the field has no visible label. Not set: the field has no visible label of its own.

aria-labelNexera

string

Accessible name when it must differ from the visible label. Prefer the visible label (WCAG 2.5.3). Accessible name. Required when there is no visible label; translate it. Accessible name. Optional when aria-labelledby is set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the field; wins over the visible label. Id(s) of element(s) that name the field; wins over aria-label. Id(s) of visible element(s) that name the field.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

isWheelDisabledReact Aria

boolean

Enables or disables changing the value with scroll.

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the input value is invalid.

validateReact Aria

(value: Color | null) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

8 direct · 2 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
2.1.1KeyboardLevel A · tested directly
2.1.2No Keyboard TrapLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.8Target Size (Minimum)Level AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
3.3.2Labels or InstructionsLevel A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-focus-within
data-hovered
data-invalid
data-open
data-pressed

Usage

<ColorInput className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Pick a colourForms and data entry

Theme studio

ColorInput

Try every prop. Copy the code.

Examples 5

With presets

Controlled

States

Long label

Right to left

Props 29

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components