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

import React from 'react'
import { Toggle } from 'playbook-ui'

const ToggleDefault = () => {
  return (
    <>
      <Toggle
          checked
      />

      <br />

      <Toggle />
    </>
  )
}

export default ToggleDefault

Disabled

import React from 'react'
import { Toggle } from 'playbook-ui'

const ToggleDisabled= () => {
  return (
    <>
      <Toggle
          checked
          disabled 
      />

      <br />

      <Toggle disabled />
    </>
  )
}

export default ToggleDisabled

Name and Value

import React, { useState } from 'react'
import { Caption, Title, Toggle } from 'playbook-ui'

const ToggleName = () => {
  const [choice, setChoice] = useState(false)

  const handleOnChange = ({ target }) => {
    setChoice(target.value = !choice)
  }

  return (
    <>
      <Title
          size={4}
          text="Which of the following vehicles do you own?"
      />

      <br />

      <Caption
          text="Car"
      />
      <Toggle
          checked={choice}
          size="sm"
      >
        <input
            name="vehicle"
            onChange={handleOnChange}
            type="checkbox"
            value="car"
        />
      </Toggle>

      <br />
      <Caption
          text="Bike"
      />
      <Toggle
          checked={choice}
          size="sm"
      >
        <input
            name="vehicle"
            onChange={handleOnChange}
            type="checkbox"
            value="bike"
        />
      </Toggle>

    </>
  )
}

export default ToggleName

Custom checkbox input

import React, { useState } from 'react'
import { Toggle } from 'playbook-ui'

const ToggleCustom = () => {
  const [choice, setChoice] = useState(false)

  const handleOnChange = ({ target }) => {
    setChoice(target.value = !choice)
  }

  return (
    <>
      <Toggle
          checked={choice}
          size="sm"
      >
        <input
            className="my custom checkbox"
            name="custom checkbox"
            onChange={handleOnChange}
            type="checkbox"
            value="ABC"
        />
      </Toggle>
    </>
  )
}

export default ToggleCustom

Custom radio inputs

import React, { useState } from 'react'
import { Caption, Title, Toggle } from 'playbook-ui'

const ToggleCustomRadio = () => {
  const [choice, setChoice] = useState('walk')

  const handleOnChange = ({ target }) => {
    setChoice(target.value)
  }

  return (
    <>
      <Title
          size={4}
          text="Select one option:"
      />

      <br />

      <Caption
          text="Walk"
      />
      <Toggle
          checked={choice}
          size="sm"
      >
        <input
            name="modes of transportation"
            onChange={handleOnChange}
            type="radio"
            value="walk"
        />
      </Toggle>

      <br />

      <Caption
          text="Bike"
      />
      <Toggle
          size="sm"
      >
        <input
            name="modes of transportation"
            onChange={handleOnChange}
            type="radio"
            value="bike"
        />
      </Toggle>

      <br />

      <Caption
          text="Ride"
      />
      <Toggle
          size="sm"
      >
        <input
            name="modes of transportation"
            onChange={handleOnChange}
            type="radio"
            value="ride"
        />
      </Toggle>
    </>
  )
}

export default ToggleCustomRadio

Things to Avoid

Avoid using if there is a selection with no action/execution that follows or if actions need to be confirmed before being applied.
Avoid using for opposing options (ie having an option on each side of toggle and the side that it is flipped to is the option that is selected).

Available Props

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