---
title: Radio
---

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

  let loading = false

  let color

  let variant

  let icon = ''
</script>

<ComponentContainer class="space-x-3">
  <Radio class="h-10 w-10" name="gaga" {color} {variant} />
  <Radio class="h-10 w-10" name="gaga" {color} {variant} />

  <div slot="code">

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

<Radio class="h-10 w-10" name="gaga" color="primary" />
<Radio class="h-10 w-10" name="gaga" color="primary" />
```

  </div>
</ComponentContainer>

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

  <VariantSelector bind:variant />
</div>