Skip to main contentSkip to sidebarSkip to headerSkip to footer

Switch

A control for toggling between two states, such as on or off.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Switch } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
<Switch />
 
{/* With variants */}
<Switch variant="success" defaultChecked />
<Switch variant="warning" defaultChecked />
<Switch variant="destructive" defaultChecked />
<Switch variant="info" defaultChecked />
 
{/* Disabled state */}
<Switch disabled />

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗