Switch

The Switch component allows users to toggle a setting between two states—on or off.

Basic Switch

This is the default switch style used to represent changes between two states.

Show Code

Disabled Switch

Disabled switches show the state but are not interactive.

Show Code

Labeled Switch

Labels describe the action being toggled and improve accessibility.

Enable Notifications

Show Code

Small Switch

Use the size="small" prop for a more compact version.

Show Code

Layer5 is the steward of Meshery and creator of Kanvas, the collaborative canvas for cloud-native infrastructure. We bridge the gap between design and operation, allowing engineers to create, configure, and deploy orchestratable diagrams in real time. Whether managing Kubernetes or multi-cloud environments, Layer5 provides the tooling needed to oversee modern infrastructure with confidence.

Switch

Table of Contents

Switch

Basic Switch

Disabled Switch

Labeled Switch

Small Switch

RESOURCES

COMMUNITY

SOLUTIONS

COMPANY