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>