ColorField
A color field allows users to edit a hex color or individual color channel value.
Theme
colorSpace
channel
The color channel that this field edits. If not provided,
the color is edited as a hex value.
channel
isDisabled
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.
Current value: #E73623
import {ColorField} from './ColorField';
import {parseColor} from 'react-aria-components';
import {useState} from 'react';
function Example() {
let [value, setValue] = useState(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} from 'react-aria-components';
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.
import {ColorField, Button, Form} 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>
);
}