Toggle

A two-state button that can be either on or off.

TailwindCSSCSS

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

$ npm add @oku-ui/primitives

Anatomy

Import the component.

<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 defaultPressed if you do not need to control the state of the toggle.
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.