Docs
Toggle Group
Toggle Group
A set of two-state buttons that can be toggled on or off.
Loading...
<script lang="ts">
import FontBold from "svelte-radix/FontBold.svelte";
import FontItalic from "svelte-radix/FontItalic.svelte";
import Underline from "svelte-radix/Underline.svelte";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<FontBold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<FontItalic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import Bold from "lucide-svelte/icons/bold";
import Italic from "lucide-svelte/icons/italic";
import Underline from "lucide-svelte/icons/underline";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<Bold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<Italic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
Installation
npx shadcn-svelte@latest add toggle-group
Usage
<script lang="ts">
import * as ToggleGroup from "$lib/components/ui/toggle-group";
</script>
<ToggleGroup.Root type="single">
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
<ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup.Root>
Examples
Default
Loading...
<script lang="ts">
import FontBold from "svelte-radix/FontBold.svelte";
import FontItalic from "svelte-radix/FontItalic.svelte";
import Underline from "svelte-radix/Underline.svelte";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<FontBold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<FontItalic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import Bold from "lucide-svelte/icons/bold";
import Italic from "lucide-svelte/icons/italic";
import Underline from "lucide-svelte/icons/underline";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<Bold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<Italic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
Outline
Loading...
<script lang="ts">
import FontBold from "svelte-radix/FontBold.svelte";
import FontItalic from "svelte-radix/FontItalic.svelte";
import Underline from "svelte-radix/Underline.svelte";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root variant="outline" type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<FontBold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<FontItalic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import Bold from "lucide-svelte/icons/bold";
import Italic from "lucide-svelte/icons/italic";
import Underline from "lucide-svelte/icons/underline";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root variant="outline" type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<Bold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<Italic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
Single
Loading...
<script lang="ts">
import FontBold from "svelte-radix/FontBold.svelte";
import FontItalic from "svelte-radix/FontItalic.svelte";
import Underline from "svelte-radix/Underline.svelte";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root type="single">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<FontBold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<FontItalic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import Bold from "lucide-svelte/icons/bold";
import Italic from "lucide-svelte/icons/italic";
import Underline from "lucide-svelte/icons/underline";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root type="single">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<Bold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<Italic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
Small
Loading...
<script lang="ts">
import FontBold from "svelte-radix/FontBold.svelte";
import FontItalic from "svelte-radix/FontItalic.svelte";
import Underline from "svelte-radix/Underline.svelte";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root size="sm" type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<FontBold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<FontItalic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import Bold from "lucide-svelte/icons/bold";
import Italic from "lucide-svelte/icons/italic";
import Underline from "lucide-svelte/icons/underline";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root size="sm" type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<Bold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<Italic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
Large
Loading...
<script lang="ts">
import FontBold from "svelte-radix/FontBold.svelte";
import FontItalic from "svelte-radix/FontItalic.svelte";
import Underline from "svelte-radix/Underline.svelte";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root size="lg" type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<FontBold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<FontItalic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import Bold from "lucide-svelte/icons/bold";
import Italic from "lucide-svelte/icons/italic";
import Underline from "lucide-svelte/icons/underline";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root size="lg" type="multiple">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<Bold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<Italic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
Disabled
Loading...
<script lang="ts">
import FontBold from "svelte-radix/FontBold.svelte";
import FontItalic from "svelte-radix/FontItalic.svelte";
import Underline from "svelte-radix/Underline.svelte";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root disabled type="single">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<FontBold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<FontItalic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import Bold from "lucide-svelte/icons/bold";
import Italic from "lucide-svelte/icons/italic";
import Underline from "lucide-svelte/icons/underline";
import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
</script>
<ToggleGroup.Root disabled type="single">
<ToggleGroup.Item value="bold" aria-label="Toggle bold">
<Bold class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic" aria-label="Toggle italic">
<Italic class="h-4 w-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
<Underline class="h-4 w-4" />
</ToggleGroup.Item>
</ToggleGroup.Root>
On This Page