Color Picker

Campo de seleção interativa de cores com painel flutuante, área 2D de saturação/brilho e slider de matiz. Usa a tag `mk-color-picker`.

O mk-color-picker é um campo de seleção de cores com trigger visual idêntico ao mk-input. Ao clicar, abre um painel flutuante com uma área 2D de saturação × brilho, slider de matiz, switcher HEX/RGB e swatches preset. Integrado com formulários nativos via ElementInternals — o valor submetido é sempre hexadecimal.

Padrão

import { MkColorPicker } from '@db1/makuco-ui-react';

<MkColorPicker label="Cor primária" />

<mk-color-picker label="Cor primária"></mk-color-picker>

Preenchido

Quando value é definido, o campo exibe um swatch colorido à esquerda e o valor no formato configurado.

<MkColorPicker label="Cor da marca" value="#4582fa" />

<mk-color-picker label="Cor da marca" value="#4582fa"></mk-color-picker>

Com swatches

Use swatches para oferecer um conjunto de cores predefinidas. Clicar em um swatch aplica a cor imediatamente e emite mkChange.

<MkColorPicker
  label="Cor"
  value="#4582fa"
  swatches={['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2']}
/>

<mk-color-picker
  label="Cor"
  value="#4582fa"
  [swatches]="['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2']">
</mk-color-picker>

Texto de suporte

Use supportText para fornecer uma dica contextual abaixo do campo. É substituído pela errorMessage quando o campo está em estado de erro.

<MkColorPicker label="Cor" supportText="Selecione a cor principal da sua marca" />

<mk-color-picker label="Cor" support-text="Selecione a cor principal da sua marca"></mk-color-picker>

Formato RGB

Quando format="rgb", o painel exibe três inputs separados (R, G e B) em vez de um campo HEX único. O evento mkChange emite um array [r, g, b].

<MkColorPicker label="Cor" value="#e74c3c" format="rgb" />

<mk-color-picker label="Cor" value="#e74c3c" format="rgb"></mk-color-picker>

Estado de erro

Defina errorMessage para ativar o estado inválido. O rótulo e a borda ficam vermelhos e a mensagem é exibida abaixo do campo. Ignorado quando disabled ou readOnly.

<MkColorPicker
  label="Cor"
  value="#ff0000"
  errorMessage="Cor não permitida neste contexto"
/>

<mk-color-picker
  label="Cor"
  value="#ff0000"
  error-message="Cor não permitida neste contexto">
</mk-color-picker>

Desabilitado e somente leitura

<MkColorPicker label="Desabilitado" value="#4582fa" disabled />
<MkColorPicker label="Somente leitura" value="#4582fa" readOnly />

<mk-color-picker label="Desabilitado" value="#4582fa" [disabled]="true"></mk-color-picker>
<mk-color-picker label="Somente leitura" value="#4582fa" [read-only]="true"></mk-color-picker>

Formulários

mk-color-picker é form-associated e integra com <form> nativo. O valor submetido é sempre hexadecimal, independentemente do format configurado.

import { MkColorPicker, MkButton } from '@db1/makuco-ui-react';

<form onSubmit={handleSubmit}>
  <MkColorPicker label="Cor da marca" name="brand-color" value="#4582fa" />
  <MkButton type="submit">Salvar</MkButton>
</form>

<form (ngSubmit)="handleSubmit()">
  <mk-color-picker label="Cor da marca" name="brand-color" value="#4582fa"></mk-color-picker>
  <mk-button type="submit">Salvar</mk-button>
</form>

Props — mk-color-picker

Prop	Tipo	Padrão	Descrição
`label`	`string`	—	Texto do rótulo exibido acima do campo. Obrigatório.
`value`	`string \\| [number, number, number]`	—	Cor atual. String hex (`#rrggbb`) ou tupla `[r, g, b]`. Quando omitido, o campo exibe o placeholder.
`format`	`"hex" \\| "rgb"`	`"hex"`	Formato de exibição e do payload de `mkChange`. O valor submetido em formulários é sempre hex.
`supportText`	`string`	—	Texto de suporte abaixo do campo. Exibido quando não há erro ativo.
`errorMessage`	`string`	—	Mensagem de erro. Ativa o estado inválido com borda e rótulo vermelhos. Ignorada quando `disabled` ou `readOnly`.
`disabled`	`boolean`	`false`	Desabilita toda interação. Refletido como atributo no host.
`readOnly`	`boolean`	`false`	Campo visível, mas o painel não pode ser aberto. Refletido como atributo no host.
`name`	`string`	—	Nome para submissão em formulários nativos.
`swatches`	`string[]`	`[]`	Lista de cores predefinidas (strings hex). Exibidas no painel como botões clicáveis.
`placeholder`	`string`	`"#"`	Texto exibido no campo quando nenhum valor está definido.

Eventos

Evento	Componente	Payload	Descrição
`mkChange`	`mk-color-picker`	`string \\| [number, number, number]`	Emitido a cada mudança de cor. Retorna `string` hex quando `format="hex"` ou `[r, g, b]` quando `format="rgb"`.
`mkOpen`	`mk-color-picker`	`void`	Emitido quando o painel abre. Não borbulha.
`mkClose`	`mk-color-picker`	`void`	Emitido quando o painel fecha — por clique no trigger, clique fora ou tecla `Escape`. Não borbulha.

Acessibilidade

O componente atende WCAG 2.1 AA:

Trigger: <button> com aria-haspopup="dialog", aria-expanded refletindo o estado do painel e aria-label descritivo com a cor atual.
Painel: role="dialog", aria-modal="true" e aria-label="Seletor de cor".
Área de saturação: role="slider" com aria-label e aria-valuetext descritivos.
Slider de matiz: role="slider" com aria-valuemin="0", aria-valuemax="360", aria-valuenow e aria-valuetext.
Estado de erro: aria-invalid="true" no trigger; aria-describedby aponta para a mensagem de erro.
Swatches: cada botão tem aria-label com o valor hexadecimal.
Form-associated: submite o valor hex via ElementInternals.setFormValue.

Tecla	Comportamento
`Enter` / `Space`	Abre ou fecha o painel.
`Escape`	Fecha o painel e retorna o foco ao trigger.
`Tab`	Navega entre os controles dentro do painel (inputs, swatches, toggle).

Color Picker

On this page