Radix VueToggle
A two-state button that can be either on or off.
vue
<script setup lang="ts">
import { Toggle } from 'radix-vue'
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
const toggleState = ref(false)
</script>
<template>
<Toggle
v-model:pressed="toggleState" aria-label="Toggle italic"
class="hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
>
<Icon icon="radix-icons:font-italic" class="w-[15px] h-[15px]" />
</Toggle>
</template>Features
- Full keyboard navigation.
- Can be controlled or uncontrolled.
Installation
Install the component from your command line.
bash
npm install radix-vueAnatomy
Import the component.
vue
<script setup>
import { Toggle } from 'radix-vue'
</script>
<template>
<Toggle />
</template>API Reference
Root
The toggle.
| Prop | Type | Default |
|---|---|---|
defaultPressed | boolean | |
pressed | boolean | |
disabled | boolean | |
as | string | Component | button |
asChild | boolean | false |
| Emit | Type |
|---|---|
@update:pressed | (value: string) => void |
| Data Attribute | Value |
|---|---|
[data-state] | "on" | "off" |
[data-disabled] | Present when disabled |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
Space | Activates/deactivates the toggle. |
Enter | Activates/deactivates the toggle. |