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 Group

A set of two-state buttons that can be toggled on or off.

import { component$ } from '@builder.io/qwik';
import { ToggleGroup } from '~/components/ui';

export default component$(() => {
  return (
    <ToggleGroup.Root>
      <ToggleGroup.Item value="left" aria-label="Left aligned">
        Left
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" aria-label="Center aligned">
        Center
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" aria-label="Right aligned">
        Right
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
});

You can choose a multiple selection variant:

import { component$ } from '@builder.io/qwik';
import { ToggleGroup } from '~/components/ui';

export default component$(() => {
  return (
    <ToggleGroup.Root multiple>
      <ToggleGroup.Item value="left" aria-label="Left aligned">
        Left
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" aria-label="Center aligned">
        Center
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" aria-label="Right aligned">
        Right
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
});

And here is the default look for a disabled ToggleGroup.Root:

import { component$ } from '@builder.io/qwik';
import { ToggleGroup } from '~/components/ui';

export default component$(() => {
  return (
    <ToggleGroup.Root disabled>
      <ToggleGroup.Item value="left" aria-label="Left aligned">
        Left
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" aria-label="Center aligned">
        Center
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" aria-label="Right aligned">
        Right
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
});

To see all features and the API checkout our

Headless component

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add toggle-group

import { component$, type PropsOf, Slot } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
import { ToggleGroup as HeadlessToggleGroup } from '@qwik-ui/headless';

import type { VariantProps } from 'class-variance-authority';

import { toggleVariants } from '../toggle/toggle';

type ToggleGroupRootProps = PropsOf<typeof HeadlessToggleGroup.Root>;

const Root = component$<ToggleGroupRootProps>(({ ...props }) => {
  return (
    <HeadlessToggleGroup.Root
      {...props}
      class={cn('flex items-center gap-1', props.class)}
    >
      <Slot />
    </HeadlessToggleGroup.Root>
  );
});

type ToggleGroupItemProps = PropsOf<typeof HeadlessToggleGroup.Item> &
  VariantProps<typeof toggleVariants>;

const Item = component$<ToggleGroupItemProps>(({ size, look, ...props }) => {
  return (
    <HeadlessToggleGroup.Item
      {...props}
      class={cn(toggleVariants({ size, look }), props.class)}
    >
      <Slot />
    </HeadlessToggleGroup.Item>
  );
});

export const ToggleGroup = {
  Root,
  Item,
};

Usage

import { ToggleGroup } from '~/components/ui';

<ToggleGroup.Root type="multiple">
  <ToggleGroup.Item value="left" aria-label="Left aligned">
    Left
  </ToggleGroup.Item>
  <ToggleGroup.Item value="center" aria-label="Center aligned">
    Center
  </ToggleGroup.Item>
  <ToggleGroup.Item value="right" aria-label="Right aligned">
    Right
  </ToggleGroup.Item>
</ToggleGroup.Root>