Switch

The Switch component, also referred to as a toggle, allows the user to switch between on and off options. The changes applied to a Switch component are expected to go into effect immediately, rather than waiting for a formal submission such as controls in a Form.

For more information on how to use the features and props for this component, check out the developer documentation.

The Switch component can be used as a controlled input by passing an onChange callback function to handle the component's state. The Switch component is toggled off b default, but can be set on via the on boolean prop.

This component accepts a label which will render inline to the left of the control. The component will stretch to 100% width of its container, but can be toggled on/off by clicking anywhere over the label, control, or the inline space in-between. The Switch component can also be disabled.

NameTypeDefaultDescription
classNamestringAdditional CSS classes.
disabledbooleanfalse Disables the control.
idstringSets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.
labelReactNodePass a string or a fragment with an Icon and string.
onbooleanfalse Sets checked prop via onChange.
onChange(e: ChangeEvent<HTMLInputElement>) => voidCallback that is triggered when the Switch is toggled.
refRef<HTMLInputElement>Ref for the input element.

You can override the styles of the Switch component by setting a custom theme on the Configuration component.

{
      •       height: '1.5rem',
      •       width: '3rem',
      •       'touch-height': '2rem',
      •       'touch-width': '4rem',
        •         color: 'base.colors.gray.medium' // → base.colors.gray.medium
        •       },
        •         color: 'base.palette.interactive' // → base.palette.interactive
        •       }
      •     }
    •   }
}