ToggleGroupDemo() — ui Function Reference

Architecture documentation for the ToggleGroupDemo() function in toggle-group-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ ToggleGroupDemo() — ui Function Reference

Dependency Diagram

graph TD
  1e16f202_3107_7708_89f6_494889eb2bb7["ToggleGroupDemo()"]
  71056e20_5a55_111f_6382_572a1ac079fc["toggle-group-demo.tsx"]
  1e16f202_3107_7708_89f6_494889eb2bb7 -->|defined in| 71056e20_5a55_111f_6382_572a1ac079fc
  style 1e16f202_3107_7708_89f6_494889eb2bb7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx lines 15–139

export function ToggleGroupDemo() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      <ToggleGroup type="multiple" spacing={2}>
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          <BoldIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          <ItalicIcon />
        </ToggleGroupItem>
        <ToggleGroupItem
          value="strikethrough"
          aria-label="Toggle strikethrough"
        >
          <UnderlineIcon />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup
        variant="outline"
        type="single"
        defaultValue="all"
        className="*:data-[slot=toggle-group-item]:w-20"
      >
        <ToggleGroupItem value="all" aria-label="Toggle all">
          All
        </ToggleGroupItem>
        <ToggleGroupItem value="missed" aria-label="Toggle missed">
          Missed
        </ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup
        variant="outline"
        type="single"
        size="sm"
        defaultValue="last-24-hours"
        className="*:data-[slot=toggle-group-item]:px-3"
      >
        <ToggleGroupItem
          value="last-24-hours"
          aria-label="Toggle last 24 hours"
        >
          Last 24 hours
        </ToggleGroupItem>
        <ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
          Last 7 days
        </ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup type="single" size="sm" defaultValue="last-24-hours">
        <ToggleGroupItem
          value="last-24-hours"
          aria-label="Toggle last 24 hours"
        >
          Last 24 hours
        </ToggleGroupItem>
        <ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
          Last 7 days
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" size="sm" defaultValue="top" variant="outline">
        <ToggleGroupItem value="top" aria-label="Toggle top">
          Top
        </ToggleGroupItem>
        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
          Bottom
        </ToggleGroupItem>
        <ToggleGroupItem value="left" aria-label="Toggle left">
          Left
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Toggle right">
          Right
        </ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup
        type="single"
        size="sm"
        defaultValue="top"
        variant="outline"
        spacing={2}