Pular para o conteúdo principal

Color

color renderiza um seletor de cor do MUI baseado em um input type="color" nativo. Ele mostra o swatch selecionado e seu código HEX.

{name: 'primaryColor', label: 'Cor primária', type: 'color'}

Valor e default​

O contrato de valor é #RRGGBB | null. Qualquer cor informada deve usar seis dígitos hexadecimais, incluindo o # inicial. Quando nenhum valor inicial ou defaultValue é fornecido, o valor do field é null.

{
  name: 'primaryColor',
  label: 'Cor primária',
  type: 'color',
  defaultValue: '#0F766E',
}

onSubmit recebe a mesma string ou valor null:

{primaryColor: '#0F766E'}

Required, estado e ajuda​

Use required: true para exigir uma cor. disabled: true impede a interação, enquanto readOnly: true mantém a cor selecionada visível sem permitir alterações. Use helperText para explicar como uma cor é usada.

{
  name: 'brandColor',
  label: 'Cor corporativa da marca',
  type: 'color',
  disabled: true,
  helperText: 'Esta cor é gerenciada pela sua organização.',
}

Condições e grid​

Fields color usam as mesmas condições declarativas e grid responsivo dos demais fields de dados.

{
  name: 'secondaryColor',
  label: 'Cor secundária',
  type: 'color',
  visibleWhen: {field: 'useCustomPalette', operator: 'equals', value: true},
  grid: {xs: 12, md: 6},
}

Consulte Fields para o contrato compartilhado de fields.

Testar Color no Lab