Switch <ESwitch> ​

The switch works just like a checkbox but has a different appearance.

Variant ​

Use the variant prop to change the element theming according to your configured variants.

Highlight ​

Set the highlight prop to override the default border color with the variant color.

Highlight is automatically set to true if the feedback prop is populated. Set highlight to false to override feedback highlighting.

Icons ​

Set the icon-checked and icon-unchecked props to add icons to your switch.

Labels ​

Use the label, and description props to describe your switch.

You can also use slots for more freedom on label content. Please see the Slots section for information on slot variables.

Block ​

By default the checkbox component is displayed as an inline element. By adding the block prop, the input container will span the whole container width.

Disabled ​

A disabled switch cannot be interacted with.

Feedback ​

Use the feedback slot to add validation or other form errors to your switch input. Elements provides variants for error and success feedback types.

Component Reference ​