ColorField
The props declared for ColorField, generated from the types @proyecto-viviana/ui ships.
Import
import { ColorField } from "@proyecto-viviana/ui";Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'S' | 'M' | 'L' | 'XL' | 'sm' | 'md' | 'lg' | — | The size of the color field. |
styles | StyleString | — | Spectrum-defined generated classes. |
UNSAFE_className | string | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
class | string | — | Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. |
description | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | Description text below the input. |
errorMessage | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | Error message to display. |
labelPosition | 'top' | 'side' | — | Position of the label relative to the input. |
labelAlign | 'start' | 'end' | — | Text alignment for side labels. |
necessityIndicator | 'label' | 'icon' | — | Whether required fields show an icon or text label. |
prefix | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | An icon or text rendered before the input. |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
id | string | — | Element id for the input. solidaria |
onChange | (color: Color | null) => void | — | Handler called when the color changes. solidaria-components |
aria-describedby | string | — | ID of element that describes the field. solidaria |
aria-details | string | — | ID of element that provides detailed information about the field. solidaria |
aria-errormessage | string | — | ID of element that provides the error message. solidaria |
aria-label | string | — | Accessible label for the field. solidaria |
aria-labelledby | string | — | ID of element that labels the field. solidaria |
isDisabled | false | true | — | Whether the field is disabled. solidaria |
autoFocus | false | true | — | Whether the input should receive focus on mount. solidaria |
form | string | — | Associated form owner. solidaria |
name | string | — | Form field name. solidaria |
value | string | Color | — | The current color value (controlled). solidaria-components |
excludeFromTabOrder | false | true | — | Whether the input should be excluded from tab order. solidaria |
label | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | A visible label for the field. solidaria-components |
defaultValue | string | Color | — | The default color value (uncontrolled). solidaria-components |
isReadOnly | false | true | — | Whether the field is read-only. solidaria |
isInvalid | false | true | — | Whether the field is invalid. solidaria |
isRequired | false | true | — | Whether the field is required. solidaria |
validationBehavior | 'aria' | 'native' | — | Whether to use native or ARIA validation semantics. solidaria |
colorSpace | 'rgb' | 'hsl' | 'hsb' | — | The color space to use for channel mode. solidaria-components |
channel | 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'brightness' | 'lightness' | 'alpha' | — | The color channel to edit (for single channel mode). solidaria-components |
colorFormat | 'rgb' | 'hsl' | 'hsb' | 'hex' | 'hexa' | 'rgba' | 'hsla' | 'hsba' | — | The color format for parsing/displaying. solidaria-components |
isWheelDisabled | false | true | — | Whether browser wheel events should be ignored. solidaria |
placeholder | string | — | Placeholder text. solidaria |
Declared in packages/viviana-ui/src/color/index.tsx.
Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.