---
title: Checkbox
---

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

  let loading = false

  let color

  let variant

  let icon = ''
</script>

<ComponentContainer>
  <Checkbox class="h-10 w-10" checked {color} {variant} />
  <div slot="code">

<!-- prettier-ignore -->
```svelte
<script>
  import { Checkbox } from 'slender-ui'
</script>

<Checkbox class="h-10 w-10" checked color="primary" />
```

  </div>
</ComponentContainer>

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

  <VariantSelector bind:variant />
</div>