Toggle

A toggle component is a primitive that us used to quickly switch between two possible states.

import { $, component$ } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';

export default component$(() => {
  return (
    <>
      <Toggle pressed onClick$={$(() => console.log('Toggle'))} />
    </>
  );
});

Building blocks

import { component$, useSignal } from '@builder.io/qwik';
import { Toggle } from '@qwik-ui/headless';

export default component$(() => {
  const toggleChecked = useSignal(false);
  return <Toggle pressed={toggleChecked.value} />;
});

Examples

WIP

Accessibility

Keyboard interaction

Key	Description
`Space`	Toggle between states
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.

API

Toggle

Prop	Type	Description
`pressed`	`boolean`	Toggle between pressed and not pressed state
`defaultPressed`	`boolean`	The default pressed state when the toggle is rendered
`onClick$`	`function`	A custom click handler to wire to the toggle click event
`disabled`	`boolean`	Sets whether the toggle is disabled or not