Switch

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

Airplane mode

vue

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

bash

npm install radix-vue

Anatomy

Import all parts and piece them together.

vue

<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	Type	Default
`defaultChecked`	`boolean`
`checked`	`boolean`
`disabled`	`boolean`
`required`	`boolean`
`name`	`string`
`value`	`string`	`on`
`as`	`string \| Component`	`button`
`asChild`	`boolean`	`false`

Emit	Type
`@update:checked`	`(value: boolean) => void`

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	Type	Default
`as`	`string \| Component`	`span`
`asChild`	`boolean`	`false`

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.

Switch ​

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Thumb ​

Accessibility ​

Keyboard Interactions ​