Switch

A control that toggles between two states.

Airplane mode

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

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

<template>
  <div class="flex items-start relative">
    <div class="flex h-5 items-center">
      <ASwitchRoot
        id="airplane-mode"
        v-model="switchState"
        class="border-2 border-transparent rounded-full inline-flex shrink-0 w-9 transition-colors-280 items-center focus-visible:(outline-2 outline-primary outline-offset-2) data-[state=checked]:bg-primary data-[state=unchecked]:bg-background-accented"
      >
        <ASwitchThumb
          class="group rounded-full bg-background flex size-4 pointer-events-none ring-0 shadow-lg transition-transform-280 items-center justify-center data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:rtl:-translate-x-4 data-[state=unchecked]:rtl:-translate-x-0"
        />
      </ASwitchRoot>
    </div>

    <div class="text-sm ms-2">
      <label
        class="color-text font-medium block"
        for="airplane-mode"
      >
        Airplane mode
      </label>
    </div>
  </div>
</template>

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Anatomy

Import all parts and piece them together.

<script setup>
import { ASwitchRoot, ASwitchThumb } from 'akar';
</script>

<template>
  <ASwitchRoot>
    <ASwitchThumb />
  </ASwitchRoot>
</template>

One benefit of using Akar is its flexibility and low-level control over the components. However, this also means that you may need to manually construct more complex UI elements by combining multiple Akar components together.

If you feel there's a lot of elements that needs to be constructed manually using Akar, consider using Pohon UI instead. It provides a higher-level abstraction over Akar components with pre-defined styles and behaviors that can help you build UIs faster.

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.

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 state of the switch when it is initially rendered. Use when you do not need to control its state.
`disabled`		`boolean` When `true`, prevents the user from interacting with the switch.
`id`		`string`
`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.
`value`	`'on'`	`string` The value given as data when submitted with a `name`.

Emits

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

Slots

Slot	Type
`modelValue`	`boolean` The controlled state of the switch. Can be bind as `v-model`.

Data Attributes

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.

Props

Prop	Default	Type
`as`	`'span'`	`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.

Data Attributes

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.

Slider

An input to select a numeric value within a range.

Tags Input

An input element that displays interactive tags.