@navinc/base-react-components/src/toggle.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'

const ToggleChannel = styled.label`
  display: flex;
  border-radius: 1.5em;
  line-height: 1;
  height: 1.5em;
  width: 3em;
  background: ${({ checked, disabled, theme }) =>
    disabled ? theme.neutral300 : checked ? theme.azure : theme.neutral400};
  padding: 0.25em;
`

const ToggleIndicator = styled.input.attrs(() => ({ type: 'checkbox' }))`
  box-sizing: border-box;
  border-radius: 50%;
  background: ${({ theme }) => theme.white};
  height: 1em;
  width: 1em;
  transition: transform 0.2s ease-in-out;
  transform: translateX(${({ checked }) => (checked ? '150%' : '0')});
  appearance: none;
  margin: 0;
  font-size: inherit;

  :focus {
    outline: 0;
  }
`

const Toggle = ({ checked, disabled, ...props }) => (
  <ToggleChannel data-testid="toggle-channel" {...{ checked, disabled }}>
    <ToggleIndicator {...{ checked, disabled }} {...props} />
  </ToggleChannel>
)

export default styled(Toggle)``