---
title: Toggle
---

<script>
  import { Toggle } from 'slender-ui'
  import { ComponentContainer, VariantSelector, ColorSelector } from '$lib'

  let loading = false

  let color

  let variant
</script>

A switch, a toggle, the mind does it boggle; this is no fox but a fancy checkbox!

<ComponentContainer>
  <Toggle size="large" checked {color} {variant} />

  <div slot="code">

```svelte
<script>
  import { Toggle } from 'slender-ui'
</script>

<Toggle size="large" color="primary" />
```

  </div>
</ComponentContainer>

<div class="not-prose relative flex mt-3 space-x-6">
  <ColorSelector bind:color />

  <VariantSelector bind:variant />
</div>