Switch

A control that allows the user to toggle between checked and not checked.

Airplane mode

<script setup lang="ts">
import { SwitchRoot, SwitchThumb } from 'radix-vue'
import { ref } from 'vue'

const switchState = ref(false)
</script>

<template>
  <div class="flex gap-2 items-center">
    <label class="text-white text-[15px] leading-none pr-[15px] select-none" for="airplane-mode">
      Airplane mode
    </label>
    <SwitchRoot
      id="airplane-mode"
      v-model:checked="switchState"
      class="w-[42px] h-[25px] focus-within:outline focus-within:outline-black flex bg-black/50 shadow-sm rounded-full relative data-[state=checked]:bg-black cursor-default"
    >
      <SwitchThumb
        class="block w-[21px] h-[21px] my-auto bg-white shadow-sm rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]"
      />
    </SwitchRoot>
  </div>
</template>

Features

• Full keyboard navigation.
• Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install radix-vue

Anatomy

Import all parts and piece them together.

<script setup>
import { SwitchRoot, SwitchThumb } from 'radix-vue'
</script>

<template>
  <SwitchRoot>
    <SwitchThumb />
  </SwitchRoot>
</template>

API Reference

Root

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

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.
checked		boolean The controlled state of the switch. Can be bind as v-model:checked.
defaultChecked		boolean The state of the switch when it is initially rendered. Use when you do not need to control its state.
disabled		boolean When true, prevents the user from interacting with the switch.
id		string
name		string The name of the switch. Submitted with its owning form as part of a name/value pair.
required		boolean When true, indicates that the user must check the switch before the owning form can be submitted.
value	'on'	string The value given as data when submitted with a name.

Emit	Payload
update:checked	[payload: boolean] Event handler called when the checked state of the switch changes.

Data Attribute	Value
[data-state]	"checked" | "unchecked"
[data-disabled]	Present when disabled

Thumb

The thumb that is used to visually indicate whether the switch is on or off.

Prop	Default	Type
as	'span'	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.

Data Attribute	Value
[data-state]	"checked" | "unchecked"
[data-disabled]	Present when disabled

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions

Key	Description
Space	Toggles the component's state.
Enter	Toggles the component's state.