ColorField
A color field allows users to edit a hex color or individual color channel value.
Preview
Code
Examples
Disabled
Preview
Code
Composed with ColorSwatch, Popover, DialogTrigger, and ColorSlider
Preview
Code
Props
Name | Type | Default |
|---|---|---|
channel | ColorChannel | — |
colorSpace | ColorSpace | — |
isDisabled | boolean | — |
autoFocus | boolean | — |
onFocus | ((e: FocusEvent<Element, Element>) => void) | — |
onBlur | ((e: FocusEvent<Element, Element>) => void) | — |
onFocusChange | ((isFocused: boolean) => void) | — |
onKeyDown | ((e: KeyboardEvent) => void) | — |
onKeyUp | ((e: KeyboardEvent) => void) | — |
id | string | — |
excludeFromTabOrder | boolean | — |
name | string | — |
value | string | Color | null | — |
defaultValue | string | Color | null | — |
onCopy | ClipboardEventHandler<HTMLInputElement> | — |
onCut | ClipboardEventHandler<HTMLInputElement> | — |
onPaste | ClipboardEventHandler<HTMLInputElement> | — |
onCompositionEnd | CompositionEventHandler<HTMLInputElement> | — |
onCompositionStart | CompositionEventHandler<HTMLInputElement> | — |
onCompositionUpdate | CompositionEventHandler<HTMLInputElement> | — |
onChange | ((color: Color | null) => void) | — |
onBeforeInput | FormEventHandler<HTMLInputElement> | — |
onInput | FormEventHandler<HTMLInputElement> | — |
onSelect | ReactEventHandler<HTMLInputElement> | — |
isReadOnly | boolean | — |
isRequired | boolean | — |
isInvalid | boolean | — |
validate | ((value: Color | null) => true | ValidationError | null) | — |
isWheelDisabled | boolean | — |
validationBehavior | "native" | "aria" | 'native' |
children | ReactNode | ((values: ColorFieldRenderProps & { defaultChildren: ReactNode; }) => ReactNode) | — |
className | string | ((values: ColorFieldRenderProps & { defaultClassName: string; }) => string) | — |
style | CSSProperties | ((values: ColorFieldRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
slot | string | null | — |
ref | ForwardedRef<HTMLInputElement> | — |