eds-switch

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Plain HTML

In React

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`	Indicates whether the switch is checked.	`boolean`	`false`
`disabled`	`disabled`	Disables the switch if true.	`boolean`	`false`
`labelOff`	`label-off`	Label to display when the switch is OFF.	`string`	`''`
`labelOn`	`label-on`	Label to display when the switch is ON.	`string`	`''`
`variant`	`variant`	Variant of the switch: ’toggle’ (default) or ‘segmented’ (pill-style buttons)	`"segmented" \| "toggle"`	`'toggle'`

Events

Event	Description	Type
`uiswitch`	Emitted when the switch is toggled.	`CustomEvent<{ value: boolean; }>`

Dependencies

Used by

eds-table

Graph

graph TD;
  eds-table --> eds-switch
  style eds-switch fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS