Skip to content

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.

PropDefaultType
as
'div'
object | AsTag
defaultPressed
boolean

The state of the toggle when initially rendered. Use defaultPressed if you do not need to control the state of the toggle.

disabled
boolean
pressed
boolean

The controlled state of the toggle.

EmitPayload
update:pressed
[value: boolean]
Data AttributeValue
[data-state]"on" | "off"
[data-disabled]Present when disabled

Accessibility

Keyboard Interactions

KeyDescription
Space
Activates/deactivates the toggle.
Enter
Activates/deactivates the toggle.