Toggle

Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.

Default State


VStack(spacing: Spacing.small) {
  PBToggle(checked: true)
  PBToggle(checked: false)
}

Name and Value


VStack(spacing: Spacing.small) {
  PBToggle(label: "car", checked: false)
  PBToggle(label: "bike", checked: false)
}

Props

Name	Type	Description	Default	Values
isHovering	`Bool`	Changes the style of the Toggle	`false`	`true` `false`
label	`String`	Adds a label to the Toggle	`nil`
checked	`Bool`	Changes the style of the Toggle		`true` `false`

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat