React Aria
DocsReleasesBlog
React Aria

ColorField

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

Theme 
 
colorSpace 
channel 
 
isDisabled 
Example
ColorField.tsx
ColorField.css
import {ColorField} from './ColorField';

<ColorField
  label="Color"
  defaultValue="#ff0000"
  placeholder="Enter a color" />

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 object, parsed using the function. onChange is always called with a Color object.

Current value: #E73623
import {ColorField} from './ColorField';
import {parseColor, type Color} from 'react-aria-components';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState<Color | null>(parseColor('#e73623'));

  return (
    <div>
      <ColorField
        label="Primary color"
        placeholder="Enter a 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.

Current value: #7F007F
import {ColorField} from './ColorField';
import {parseColor, type Color} from 'react-aria-components';
import {useState} from 'react';

function Example() {
  let [color, setColor] = useState<Color | null>(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.

import {ColorField} from './ColorField';
import {Button} from './Button';
import {Form} from './Form';

function Example(props) {
  return (
    <Form>
      <ColorField
        {...props}
        label="Brand color"
        placeholder="Enter a color"
        name="brandColor"
        isRequired />
      <Button type="submit" style={{marginTop: 8}}>Submit</Button>
    </Form>
  );
}

API

Shows a color field component with labels pointing to its parts, including the input, and label elements.#ABCDEFBackground colorInputLabel 
<ColorField>
  <Label />
  <Input />
  <Text slot="description" />
  <FieldError />
</ColorField>

ColorField

NameType
channel

The color channel that this field edits. If not provided, the color is edited as a hex value.

colorSpace

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.

isWheelDisabledboolean

Enables or disables changing the value with scroll.

isDisabledboolean

Whether the input is disabled.

isReadOnlyboolean

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

children<>

The children of the component. A function may be provided to alter the children based on component state.

valueT

The current value (controlled).

defaultValueT

The default value (uncontrolled).

onChange(color: | null) => void

Handler that is called when the value changes.

Default className: react-aria-ColorField

Render PropCSS Selector
isDisabledCSS Selector: [data-disabled]
Whether the color field is disabled.
isInvalidCSS Selector: [data-invalid]
Whether the color field is invalid.
isReadOnlyCSS Selector: [data-readonly]
Whether the color field is read only.
isRequiredCSS Selector: [data-required]
Whether the color field is required.
channelCSS Selector: [data-channel="hex | hue | saturation | ..."]
The color channel that this field edits, or "hex" if no channel prop is set.
stateCSS Selector: —
State of the color field.

Related pages