Switch
A control that allows the user to toggle between checked and not checked.
vue
vue
<script setup lang="ts">
import { SwitchRoot, SwitchThumb } from '@oku-ui/primitives'
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.
sh
sh
$ npm add @oku-ui/primitives
Anatomy
Import all parts and piece them together.
vue
vue
<script setup>
import { SwitchRoot, SwitchThumb } from '@oku-ui/primitives'
</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 | 'div' | object | AsTag |
checked | boolean | |
defaultChecked | boolean | |
disabled | boolean | |
name | string | |
required | boolean | |
value | string |
Emit | Payload |
---|---|
update:checked | [checked: boolean] |
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 | 'div' | object | AsTag |
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. |