Skip to main content

Color

color renders a MUI color selector backed by a native input type="color". It displays the selected swatch and its HEX code.

{name: 'primaryColor', label: 'Primary color', type: 'color'}

Value and default​

The value contract is #RRGGBB | null. Any supplied color must use six hexadecimal digits, including the leading #. When neither an initial value nor defaultValue is supplied, the field value is null.

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

onSubmit receives the same string or null value:

{primaryColor: '#0F766E'}

Required, state, and help​

Use required: true to require a color. disabled: true prevents interaction, while readOnly: true keeps the selected color visible without allowing changes. Use helperText to explain how a color is used.

{
  name: 'brandColor',
  label: 'Corporate brand color',
  type: 'color',
  disabled: true,
  helperText: 'This color is managed by your organization.',
}

Conditions and grid​

Color fields use the same declarative conditions and responsive grid as other data fields.

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

See Fields for the shared field contract.

Try Color in the Lab