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.