• Documentation
  • /
  • Next.js Firebase
  • /
  • Toggle

Toggle

The Toggle component is simple styling applied to the native input[checkbox] HTML element.

By adding the class Toggle to your input components, they will be rendered similar to the ones below:

<div className={'flex w-full flex-col space-y-4'}>
  <Label className={'flex items-center space-x-4'}>
    <input type={'checkbox'} className={'Toggle'} />
    <span>Receive Emails</span>
  </Label>

  <Label className={'flex items-center space-x-4'}>
    <input type={'checkbox'} className={'Toggle'} />
    <span>Receive Notifications</span>
  </Label>
</div>

NB: the background color will automatically update based on your Tailwind configuration. In this website's case, it is #efee00.


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor