Skip to main content

Switch

switch renders a MUI switch for a boolean form value. It is useful for settings that are enabled or disabled.

{name: 'notifications', label: 'Enable notifications', type: 'switch'}

Value and default​

A switch always uses a boolean. When no initial value or defaultValue is supplied, its value defaults to false.

{
  name: 'notifications',
  label: 'Enable notifications',
  type: 'switch',
  defaultValue: true,
}

onSubmit receives the same boolean value:

{notifications: true}

State and help​

disabled: true prevents interaction. readOnly: true keeps the current value visible but prevents changes. Use helperText to explain the setting.

{
  name: 'managed',
  label: 'Managed by your organization',
  type: 'switch',
  disabled: true,
  helperText: 'This setting is controlled by policy.',
}

Conditions and grid​

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

{
  name: 'auditLog',
  label: 'Enable audit log',
  type: 'switch',
  visibleWhen: {field: 'advanced', operator: 'equals', value: true},
  grid: {xs: 12, md: 6},
}

See Fields for the shared field contract.

Try Switch in the Lab