Toggle

A two-state button that can be either on or off.

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

npm install radix-vue

Anatomy

Import the component.

<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
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 true, prevents the user from interacting with the toggle.
pressed		boolean The controlled pressed state of the toggle. Can be bind as v-model.

Emit	Payload
update:pressed	[value: boolean] Event handler called when the pressed state of the toggle changes.

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.