useColorField

Provides the behavior and accessibility implementation for a color field component. Color fields allow users to enter and adjust a hex color value.

Primary Color

Example

ColorField.tsx

ColorField.css

TextField.css

Form.css

Example

ColorField.tsx

ColorField.css

TextField.css

Form.css

import {ColorField} from './ColorField';

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

API

<ColorField>
  <Label />
  <Input />
  <Text slot="description" />
  <FieldError />
</ColorField>

useColorFieldState(props: ColorFieldProps): ColorFieldState

useColorField(
  props: AriaColorFieldProps,
state: ColorFieldState,
ref: RefObject<HTMLInputElement | null>
): ColorFieldAria

Name	Type
`colorValue`	`Color \| null`
The currently parsed color value, or null if the field is empty. Updated based on the `inputValue` as the user types.
`defaultColorValue`	`Color \| null`
The default value of the color field.
`realtimeValidation`	`ValidationResult`
Realtime validation results, updated as the user edits the value.
`displayValidation`	`ValidationResult`
Currently displayed validation results, updated when the user commits their changes.

`inputValue`	`string`
The current text value of the input. Updated as the user types, and formatted according to `formatOptions` on blur.

`setColorValue(value: Color \| null): void`
Sets the color value of the field.
`setInputValue(value: string): void`
Sets the current text value of the input.
`commit(): void`
Updates the input value based on the currently parsed color value. Typically this is called when the field is blurred.
`increment(): void`
Increments the current input value to the next step boundary, and fires `onChange`.
`decrement(): void`
Decrements the current input value to the next step boundary, and fires `onChange`.
`incrementToMax(): void`
Sets the current value to the maximum color value, and fires `onChange`.
`decrementToMin(): void`
Sets the current value to the minimum color value, and fires `onChange`.
`validate(value: string): boolean`
Validates a user input string. Values can be partially entered, and may be valid even if they cannot currently be parsed to a color. Can be used to implement validation as a user types.
`updateValidation(result: ValidationResult): void`
Updates the current validation result. Not displayed to the user until `commitValidation` is called.
`resetValidation(): void`
Resets the displayed validation state to valid when the user resets the form.
`commitValidation(): void`
Commits the realtime validation so it is displayed to the user.

Name	Type
`isWheelDisabled`	`boolean`
Enables or disables changing the value with scroll.
`isDisabled`	`boolean`
Whether the input is disabled.
`isReadOnly`	`boolean`
Whether the input can be selected but not changed by the user.
`placeholder`	`string`
Temporary text that occupies the text input when it is empty.

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

Name	Type
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
Props for the label element.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the input element.
`descriptionProps`	`DOMAttributes`
Props for the text field's description element, if any.
`errorMessageProps`	`DOMAttributes`
Props for the text field's error message element, if any.
`validationDetails`	`ValidityState`
The native validation details for the input.