use-toggle

Create owned boolean state with an inverting control.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useToggle } from "@vizejs/composable/use-toggle";

Try it

Show delivery details

Reveal additional information while keeping the disclosure button's accessible state synchronized.

Open the interactive example

What to observe: Activate the button with Enter or Space. The delivery details appear, the label changes, and aria-expanded follows the same boolean ref.

state is writable owned state; toggle() inverts it. Calling toggle(false) closes it explicitly. No browser globals or cleanup are needed.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useId } from "vue";
import { useToggle } from "@vizejs/composable/use-toggle";

const { state: expanded, toggle } = useToggle();
const detailsId = useId();
</script>

<template>
  <div class="composable-example">
    <button
      type="button"
      :aria-expanded="expanded"
      :aria-controls="detailsId"
      @click="() => toggle()"
    >
      {{ expanded ? "Hide delivery details" : "Show delivery details" }}
    </button>
    <p v-if="expanded" :id="detailsId">Free delivery in 2–3 business days.</p>
    <output aria-live="polite">Details are {{ expanded ? "visible" : "hidden" }}.</output>
  </div>
</template>

Runtime contract

API

useToggle

Create owned boolean state with an inverting control. Purely synchronous state: safe during server rendering (no browser globals, no timers) and nothing to dispose, so it works inside and outside reactive scopes alike.

function useToggle(initial = false): ToggleControls

const { state: open, toggle } = useToggle();
toggle(); // true
toggle(false); // false
open.value; // false

Types

ToggleControls

Reactive controls returned by useToggle.