ColorPicker
Amostra que abre uma paleta e campo HEX ao lado. Aceita 3 ou 6 dígitos, com ou sem #, e sempre devolve #RRGGBB em maiúsculas. HEX inválido volta ao valor anterior ao sair do campo.
Cor do signatário
A cor marca os campos de assinatura desse signatário no documento.
Escolha uma cor que não se confunda com a dos outros signatários.
Beatriz LemosTestemunha · #7D4DAD
Paleta própria e estados
Só as quatro cores da pasta, sem HEX livre.
Digite um HEX completo, como #A94700.
Definida pelo administrador da conta.
Tamanhos
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value | string | — | Cor controlada em #RRGGBB. Obrigatória. |
| onValueChange | (hex: string) => void | — | Recebe sempre #RRGGBB em maiúsculas. Obrigatória. |
| presets | Array<string | { value, label }> | DEFAULT_COLOR_PRESETS | Cores da paleta. O padrão são as 16 cores de signatário, sólidas e claras. |
| allowCustomHex | boolean | true | Mostra o campo de cor personalizada com o botão Aplicar. |
| status | "default" | "error" | "warning" | "success" | "default" | Cor da borda da amostra e do campo HEX. |
| size | "sm" | "md" | "lg" | "md" | Altura da amostra e do campo, igual ao Input. |
| id / aria-describedby / aria-invalid | — | — | Vão para o campo HEX. O Field passa sozinho. |
| placeholder | string | "#RRGGBB" | Placeholder dos campos HEX. |
| open / onOpenChange | boolean / (open) => void | — | Controle de abertura da paleta. |
| disabled | boolean | false | Desliga a amostra e o campo. |
const [color, setColor] = useState("#7D4DAD");
<Field label="Cor do signatário">
{(control) => <ColorPicker {...control} value={color} onValueChange={setColor} />}
</Field>