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.

PropDefaultType
defaultPressed
boolean

The pressed state of the toggle when it is initially rendered. Use when you do not need to control its pressed state.

pressed
boolean

The controlled pressed state of the toggle. Must be binded with v-model.

disabled
boolean

When true, prevents the user from interacting with the toggle.

as
button
string | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
false
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.

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.