Toggle Group

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { ToggleGroup, ToggleGroupItem } from "@line/abc-def-react/toggle-group";

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from "@line/abc-def-vue/toggle-group";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@line/abc-def-react/toggle-group";

export function Example() {
  return (
    <ToggleGroup type="single" defaultValue="semantic">
      <ToggleGroupItem value="semantic">Semantic</ToggleGroupItem>
      <ToggleGroupItem value="component">Component</ToggleGroupItem>
    </ToggleGroup>
  );
}

<script setup lang="ts">
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@line/abc-def-vue/toggle-group";
</script>

<template>
  <ToggleGroup type="single" default-value="semantic">
    <ToggleGroupItem value="semantic">Semantic</ToggleGroupItem>
    <ToggleGroupItem value="component">Component</ToggleGroupItem>
  </ToggleGroup>
</template>

Component tokens

This component does not define a dedicated component token file. It inherits shared semantic tokens and utility classes.

Composition exports

Usage notes

• Use `type="single"` for exclusive choices.
• Use `type="multiple"` for independent pressed states.
• Related component tokens use the `toggle-group` token group in `@line/abc-def-styles/css`.