ToggleGroup

A group of toggle buttons for selecting one or multiple options.

Basic

import { HStack, ToggleGroup, ToggleGroupItem } from "@vesyl/ui-next";
import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";

export default function ToggleGroupBasic() {
  return (
    <HStack justify="center">
      <ToggleGroup type="single" defaultValue="center">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeft />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenter />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRight />
        </ToggleGroupItem>
      </ToggleGroup>
    </HStack>
  );
}

Multiple selection

import { HStack, ToggleGroup, ToggleGroupItem } from "@vesyl/ui-next";
import { Bold, Italic, Underline } from "lucide-react";

export default function ToggleGroupMultiple() {
  return (
    <HStack justify="center">
      <ToggleGroup type="multiple" defaultValue={["bold"]}>
        <ToggleGroupItem value="bold" aria-label="Bold">
          <Bold />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Italic">
          <Italic />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Underline">
          <Underline />
        </ToggleGroupItem>
      </ToggleGroup>
    </HStack>
  );
}

Outline variant

import { HStack, ToggleGroup, ToggleGroupItem } from "@vesyl/ui-next";
import { Grid, LayoutGrid, List } from "lucide-react";

export default function ToggleGroupOutline() {
  return (
    <HStack justify="center">
      <ToggleGroup type="single" variant="outline" defaultValue="list">
        <ToggleGroupItem value="list" aria-label="List view">
          <List />
        </ToggleGroupItem>
        <ToggleGroupItem value="grid" aria-label="Grid view">
          <Grid />
        </ToggleGroupItem>
        <ToggleGroupItem value="layout" aria-label="Layout view">
          <LayoutGrid />
        </ToggleGroupItem>
      </ToggleGroup>
    </HStack>
  );
}

With spacing

import { HStack, ToggleGroup, ToggleGroupItem } from "@vesyl/ui-next";
import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from "lucide-react";

export default function ToggleGroupSpacing() {
  return (
    <HStack justify="center">
      <ToggleGroup type="single" spacing={2} defaultValue="center">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeft />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenter />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRight />
        </ToggleGroupItem>
        <ToggleGroupItem value="justify" aria-label="Justify">
          <AlignJustify />
        </ToggleGroupItem>
      </ToggleGroup>
    </HStack>
  );
}

Sizes

import { ToggleGroup, ToggleGroupItem, VStack } from "@vesyl/ui-next";
import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";

export default function ToggleGroupSizes() {
  return (
    <VStack gap={4} align="center">
      <ToggleGroup type="single" size="sm" defaultValue="center">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeft />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenter />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRight />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" size="md" defaultValue="center">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeft />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenter />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRight />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" size="lg" defaultValue="center">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeft />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenter />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRight />
        </ToggleGroupItem>
      </ToggleGroup>
    </VStack>
  );
}

Vertical orientation

import { HStack, ToggleGroup, ToggleGroupItem } from "@vesyl/ui-next";
import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";

export default function ToggleGroupVertical() {
  return (
    <HStack justify="center">
      <ToggleGroup type="single" orientation="vertical" defaultValue="left">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeft />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenter />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRight />
        </ToggleGroupItem>
      </ToggleGroup>
    </HStack>
  );
}