Toggle

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

<script setup lang="ts">
import { AToggle } from 'akar';
import { ref } from 'vue';

const toggleState = ref(false);
</script>

<template>
  <AToggle
    v-model="toggleState"
    aria-label="Toggle italic"
    class="color-text rounded-lg bg-background bg-white flex size-9 ring ring-ring-accented ring-inset shadow-sm transition-colors-280 items-center justify-center data-[state=on]:bg-background-accented hover:bg-background-elevated focus-within:(ring-2 ring-ring-inverted)"
  >
    <i
      class="i-lucide:italic size-6"
    />
  </AToggle>
</template>

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Anatomy

Import the component.

<script setup>
import { AToggle } from 'akar';
</script>

<template>
  <AToggle />
</template>

API Reference

Root

The toggle.

Props

Prop	Default	Type
`as`	`'button'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`boolean` The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
`disabled`	`false`	`boolean`
`modelValue`		`boolean \| null`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Emits

Event	Type
`update:modelValue`	`[value: boolean]` Event handler called when the value of the toggle changes.

Slots

Slot	Type
`modelValue`	`boolean` The controlled pressed state of the toggle. Can be bind as `v-model`.
`state`	`'on' \| 'off'` Current state
`pressed`	`boolean` Current pressed state
`disabled`	`boolean` When `true`, prevents the user from interacting with the toggle.

Accessibility

Keyboard Interactions

Key	Description
`Space`	Activates/deactivates the toggle.
`Enter`	Activates/deactivates the toggle.

Time Field

Enables users to input specific times within a designated field.

Toggle Group

A set of two-state buttons that can be toggled on or off.