<script setup lang="ts">
import Toggle from '~/components/ui/Toggle.vue'

import { ref } from 'vue'

const toggle = ref(false)
const toggle2 = ref(false)
</script>

# Toggle

Toggles are basic form inputs that visually represent a boolean value. Toggles can be **on** (`true`) or **off** (`false`).

| Prop            | Data type | Required? | Description                              |
| --------------- | --------- | --------- | ---------------------------------------- |
| `big`           | Boolean   | No        | Controls whether a toggle is big or not. |
| `v-model:value` | Boolean   | Yes       | The value controlled by the toggle.      |

## Normal toggle

Link your toggle to an input using the `v-model` directive.

```vue-html
<Toggle v-model="toggle" />
```

<Toggle v-model="toggle" />

## Big toggle

Pass a `big` prop to create a larger toggle.

```vue-html{2}
<Toggle
   big
   v-model="toggle"
/>
```

<Toggle big v-model="toggle2" />
