Radix Vue

Appearance

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.

bash
npm install radix-vue

Anatomy ​

Import the component.

vue
<script setup>
import { Toggle } from 'radix-vue'
</script>

<template>
  <Toggle />
</template>

API Reference ​

Root ​

The toggle.

PropTypeDefault
defaultPressed
boolean
pressed
boolean
disabled
boolean
as
string | Component
button
asChild
boolean
false
EmitType
@update:pressed
(value: string) => void
Data AttributeValue
[data-state]"on" | "off"
[data-disabled]Present when disabled

Accessibility ​

Keyboard Interactions ​

KeyDescription
Space
Activates/deactivates the toggle.
Enter
Activates/deactivates the toggle.