Switch

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

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.

Usage

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 by 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.

Example

Related components

Properties

NameDescriptionDefaultType
classNameAdditional CSS classes.string
disabledDisables the control.falseboolean
idSets 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.string
labelPass a string or a fragment with an Icon and string.ReactNode
onSets checked prop via onChange.falseboolean
onChange(e: ChangeEvent<HTMLInputElement>) => void
refRef for the input element.Ref<HTMLInputElement>

Custom theming

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

Example

Theme properties

{
      •       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
        •       }
      •     }
    •   }
}