Toggle

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

import { component$, useStyles$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless'; import styles from '../snippets/toggle.css?inline';  export default component$(() => {  useStyles$(styles);  return (  <div class="toggle-container">  <Toggle class="toggle">Hello</Toggle>  </div>  ); });

✨ Features

Follows the WAI-Aria design pattern
Full keyboard navigation
Can open one or multiple items at a time
Supports initial and reactive values

Building blocks

import { component$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless';  export default component$(() => {  return <Toggle>Hello</Toggle>; });

Usage / Component State

Initial Value (Uncontrolled)

An initial, uncontrolled value can be provided using the pressed prop.

import { component$, useStyles$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless'; import styles from '../snippets/toggle.css?inline';  export default component$(() => {  useStyles$(styles);  return (  <div class="toggle-container">  <Toggle pressed={true} class="toggle">  Hello  </Toggle>  </div>  ); });

If you want to have some control when the toggle is pressed, like making some side effect you can use the onPressedChange$. The event is fired when the user toggle the button, and receives the new value.

Unpress me

import { component$, useSignal, useStyles$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless'; import styles from '../snippets/toggle.css?inline';  export default component$(() => {  useStyles$(styles);  const text = useSignal('Unpress me');  return (  <div class="toggle-container container-center">  <Toggle  pressed  onPressedChange$={(p) =>  p ? (text.value = 'Unpress me') : (text.value = 'Press me')  }  class="toggle"  >  Hello  </Toggle>  <span>{text.value}</span>  </div>  ); });

Reactive Value (Controlled)

Pass a signal to bind:value prop to make the pressed state controlled (binding the value with a signal).

You pressed me

import { component$, useComputed$, useSignal, useStyles$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless'; import styles from '../snippets/toggle.css?inline';  export default component$(() => {  useStyles$(styles);  const pressedState = useSignal(true);   const text = useComputed$(() => {  return pressedState.value ? 'You pressed me' : 'You unpressed me';  });   return (  <div class="toggle-container container-center">  <Toggle bind:pressed={pressedState} class="toggle">  Hello  </Toggle>  <span>{text.value}</span>  <button  style={{ border: '1px solid black', padding: '10px' }}  onClick$={() => (pressedState.value = true)}  >  I can only press  </button>  </div>  ); });

Disabled

Pass the disabled prop.

import { component$, useStyles$ } from '@builder.io/qwik'; import { Toggle } from '@qwik-ui/headless'; import styles from '../snippets/toggle.css?inline';  export default component$(() => {  useStyles$(styles);  return (  <div class="toggle-container">  <Toggle disabled class="toggle">  Hello  </Toggle>  </div>  ); });

Accessibility

Keyboard interaction

Key	Description
`Space`	Toggles between states.
`Enter`	Toggles between states.

API

Prop	Type	Description
`pressed`	`boolean`	Initial value to make the pressed state uncontrolled. Use in conjunction with `onPressedChange$` to have some reactivity.
`onPressedChange$`	`function`	Called when the state changes.
`bind:pressed`	`Signal<boolean>`	Reactive value (signal) to make the pressed state controlled.
`disabled`	`boolean`	Disables the toggle making the toggle unpressable.