ColorField

A color field allows users to edit a hex color or individual color channel value.

Color

label

colorSpace

channel

size

labelPosition

description

contextualHelp

isDisabled

import {ColorField} from '@react-spectrum/s2';

<ColorField
  label="Color"
  defaultValue="#ff0000" />

Value

Use the value or defaultValue prop to set the color value, and onChange to handle user input. The value may be a string or Color object, parsed using the parseColor function. onChange is always called with a Color object.

Primary color

Current value: #E73623

import {ColorField} from '@react-spectrum/s2';
import {useState} from 'react';
import {parseColor} from '@react-stately/color';

function Example() {
  let [value, setValue] = useState(parseColor('#e73623'));

  return (
    <div>
      <ColorField
        label="Primary color"
        value={value}
        onChange={setValue} />
      <pre style={{fontSize: 12}}>Current value: {value.toString('hex')}</pre>
    </div>
  );
}

Channel

By default, ColorField displays a hex value. Set the colorSpace and channel props to display a specific color channel.

Hue

Saturation

Lightness

Current value: #7F007F

import {ColorField, parseColor} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [color, setColor] = useState(parseColor('#7f007f'));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <ColorField
        label="Hue"
        value={color}
        onChange={setColor}
        colorSpace="hsl"
        channel="hue" />
      <ColorField
        label="Saturation"
        value={color}
        onChange={setColor}
        colorSpace="hsl"
        channel="saturation" />
      <ColorField
        label="Lightness"
        value={color}
        onChange={setColor}
        colorSpace="hsl"
        channel="lightness" />
      <pre style={{fontSize: 12}}>Current value: {color?.toString('hex')}</pre>
    </div>
  );
}

Forms

Use the name prop to submit the text value to the server. Set the isRequired prop to validate the value, or implement custom client or server-side validation. See the Forms guide to learn more.

isRequired

necessityIndicator

import {ColorField, Button, Form} from '@react-spectrum/s2';

function Example(props) {
  return (
    <Form>
      <ColorField
        {...props}
        label="Brand color"
        name="brandColor"
        isRequired
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

API

Name	Type	Default
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the color field.
`channel`	`ColorChannel`	Default: —
The color channel that this field edits. If not provided, the color is edited as a hex value.
`colorSpace`	`ColorSpace`	Default: —
The color space that the color field operates in if a `channel` prop is provided. If no `channel` is provided, the color field always displays the color as an RGB hex value.
`isWheelDisabled`	`boolean`	Default: —
Enables or disables changing the value with scroll.
`isDisabled`	`boolean`	Default: —
Whether the input is disabled.
`isReadOnly`	`boolean`	Default: —
Whether the input can be selected but not changed by the user.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`value`	`T`	Default: —
The current value (controlled).
`defaultValue`	`T`	Default: —
The default value (uncontrolled).
`onChange`	`(color: Color \| null) => void`	Default: —
Handler that is called when the value changes.