Color Field

Text entry for a hex color, or a single channel when `channel` is set.

Import

import { ColorField } from '@marbleui/ui'

Props

<ColorField>

Prop	Type	Default	Description
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
showSwatch	`boolean`	`true`	Show a swatch of the current value before the text.
variant	`FieldVariant`	`—`

Also accepts React Aria props (111).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria ColorField · React Aria Group · React Aria Input. Follow the primitive's docs for the full keyboard map.

Usage notes

Text entry for a hex color, or for a single channel with channel. For a visual picker use ColorPicker.

<ColorField label="Brand color" defaultValue="#6366f1" />
<ColorField label="R" colorSpace="rgb" channel="red" defaultValue="rgb(99, 102, 241)" />

Uncontrolled: defaultValue. Controlled: value + onChange (a Color, or null when empty).
showSwatch (default true) previews the color at the left. It is hidden in channel mode.
Text is shown in uppercase monospace. Use isInvalid, errorMessage or validate to show a message.
Without a visible label, pass aria-label.

Example source · show

import { ColorField } from './color-field'

export const styles = {
  Hex: () => <ColorField className="w-48" label="Brand color" defaultValue="#6366f1" />,
  Channels: () => (
    <div className="flex gap-2">
      {(['red', 'green', 'blue'] as const).map((c) => (
        <ColorField key={c} className="w-20" label={c[0]!.toUpperCase()} colorSpace="rgb" channel={c} defaultValue="rgb(99, 102, 241)" variant="filled" />
      ))}
    </div>
  ),
}

Source: packages/ui/src/color-field/color-field.tsx

Catalog

Category: color
Priority: Core
Primitive: react-aria
React Aria: ColorField