Radix Vue

Appearance

Switch ​

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

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.

PropTypeDefault
defaultChecked
boolean
checked
boolean
disabled
boolean
required
boolean
name
string
value
string
on
as
string | Component
button
asChild
boolean
false
EmitType
@update:checked
(value: boolean) => void
Data AttributeValue
[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.

PropTypeDefault
as
string | Component
span
asChild
boolean
false
Data AttributeValue
[data-state]"checked" | "unchecked"
[data-disabled]Present when disabled

Accessibility ​

Adheres to the switch role requirements.

Keyboard Interactions ​

KeyDescription
Space
Toggles the component's state.
Enter
Toggles the component's state.