co-color-picker

This content is not available in your language yet.

Selector de color basado en presets. El disparador muestra la muestra actual junto al valor hex y abre un popover con una cuadrícula de colores predefinidos. El valor hex es de solo lectura (sin edición manual) e incluye un botón para copiarlo al portapapeles.

Demo

Ver código

<co-color-picker label="Color" value="#0066FF"></co-color-picker>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`disabled`	`disabled`	`boolean`	`false`	Disable the field.
`helperText`	`helper-text`	`string \| undefined`	`—`	Helper/error text below the field.
`label`	`label`	`string \| undefined`	`—`	Field label.
`layout`	`layout`	`"horizontal" \| "vertical"`	`'vertical'`	Label layout: vertical (label above) or horizontal (label beside)
`name`	`name`	`string \| undefined`	`—`	Field name for form submission.
`placeholder`	`placeholder`	`string`	`'Select color'`	Placeholder text when no color is selected.
`presets`	`presets`	`ColorPreset[] \| string \| string[]`	`''`	Preset colors as a JSON stringified array of `{ name, value }` objects or plain hex strings. When set programmatically, accepts an actual array.
`required`	`required`	`boolean`	`false`	Show required indicator.
`size`	`size`	`"lg" \| "md" \| "s" \| "sm"`	`'md'`	Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48.
`status`	`status`	`"default" \| "error" \| "success" \| "warning"`	`'default'`	Validation status.
`value`	`value`	`string`	`''`	Current color value as hex string (e.g. "#0066FF").

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coChange`	`string`	✓	✓	Emits the selected hex color on change.

Slots

Este componente no expone slots.

CSS Parts

Este componente no expone CSS parts.

CSS Custom Properties

Este componente no expone CSS custom properties.