Toggle
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.
sh
$ npm add radix-vue
Anatomy
Import the component.
vue
<script setup>
import { Toggle } from 'radix-vue'
</script>
<template>
<Toggle />
</template>
API Reference
Root
The toggle.
Prop | Default | Type |
---|---|---|
as | 'button' | AsTag | Component The element or component this component should render as. Can be overwrite by |
asChild | boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
defaultValue | boolean The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state. | |
disabled | false | boolean When |
pressed | boolean The controlled pressed state of the toggle. Can be bind as |
Emit | Payload |
---|---|
update:pressed | [value: boolean] Event handler called when the pressed state of the toggle changes. |
Slots (default) | Payload |
---|---|
pressed | boolean Current pressed state |
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. |