WARNING: This component is in

Draft

status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

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.