Toggle
A two-state button that can be either on or off.
vue
vue
<script setup lang="ts">
import { Toggle } from '@oku-ui/primitives'
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-indigo3 text-mauve12 data-[state=on]:bg-indigo6 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.
sh
sh
$ npm add @oku-ui/primitives
Anatomy
Import the component.
vue
vue
<script setup>
import { Toggle } from '@oku-ui/primitives'
</script>
<template>
<Toggle />
</template>
API Reference
Root
The toggle.
Prop | Default | Type |
---|---|---|
as | 'div' | object | AsTag |
defaultPressed | boolean The state of the toggle when initially rendered. Use | |
disabled | boolean | |
pressed | boolean The controlled state of the toggle. |
Emit | Payload |
---|---|
update:pressed | [value: boolean] |
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. |