Saltar al contenido principal

Color

color renderiza un selector de color de MUI basado en un input type="color" nativo. Muestra el swatch elegido y su código HEX.

{name: 'primaryColor', label: 'Color principal', type: 'color'}

Valor y default​

El contrato de valor es #RRGGBB | null. Cualquier color informado debe usar seis dígitos hexadecimales e incluir el # inicial. Cuando no se proporciona valor inicial ni defaultValue, el valor del field es null.

{
  name: 'primaryColor',
  label: 'Color principal',
  type: 'color',
  defaultValue: '#0F766E',
}

onSubmit recibe el mismo string o valor null:

{primaryColor: '#0F766E'}

Required, estado y ayuda​

Usá required: true para requerir un color. disabled: true impide la interacción, mientras que readOnly: true mantiene el color seleccionado visible sin permitir cambios. Usá helperText para explicar cómo se usa un color.

{
  name: 'brandColor',
  label: 'Color corporativo de marca',
  type: 'color',
  disabled: true,
  helperText: 'Este color está administrado por tu organización.',
}

Condiciones y grid​

Los fields color usan las mismas condiciones declarativas y grid responsive que los demás fields de datos.

{
  name: 'secondaryColor',
  label: 'Color secundario',
  type: 'color',
  visibleWhen: {field: 'useCustomPalette', operator: 'equals', value: true},
  grid: {xs: 12, md: 6},
}

Consultá Fields para el contrato compartido de fields.

Probar Color en el Lab