import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
export default function Default() {
return (
<ToggleGroup defaultValue={['bold']} multiple>
<ToggleGroup.Item value="bold">
<BoldIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon className="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
);
}<script lang="ts">
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/svelte';
import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';
</script>
<ToggleGroup defaultValue={['bold']} multiple>
<ToggleGroup.Item value="bold">
<BoldIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon class="size-4" />
</ToggleGroup.Item>
</ToggleGroup>Controlled
Use the value and onValueChange props to control state programmatically.
You selected bold
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
import { useState } from 'react';
export default function Controlled() {
const [value, setValue] = useState(['bold']);
return (
<div className="flex flex-col items-center gap-4">
<ToggleGroup value={value} onValueChange={(details) => setValue(details.value)} multiple>
<ToggleGroup.Item value="bold">
<BoldIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon className="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
{/* Message */}
<p>
<span className="opacity-60">You selected</span> <code className="code">{value.length > 0 ? value.join(', ') : 'none'}</code>
</p>
</div>
);
}You selected bold
<script lang="ts">
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/svelte';
import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';
let value = $state(['bold']);
</script>
<div class="flex flex-col items-center gap-4">
<ToggleGroup {value} onValueChange={(details) => (value = details.value)} multiple>
<ToggleGroup.Item value="bold">
<BoldIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon class="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
<!-- Message -->
<p><span class="opacity-60">You selected</span> <code class="code">{value.length > 0 ? value.join(', ') : 'none'}</code></p>
</div>Orientation
Using the orientation prop to control the layout.
Horizontal
Vertical
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
export default function Orientation() {
return (
<div className="flex flex-col items-center gap-4">
<p>Horizontal</p>
<ToggleGroup defaultValue={['bold']} multiple orientation="horizontal">
<ToggleGroup.Item value="bold">
<BoldIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon className="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
<p>Vertical</p>
<ToggleGroup defaultValue={['bold']} multiple orientation="vertical" className="flex-col">
<ToggleGroup.Item value="bold">
<BoldIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon className="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
</div>
);
}Horizontal
Vertical
<script lang="ts">
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/svelte';
import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';
</script>
<div class="flex flex-col items-center gap-4">
<p>Horizontal</p>
<ToggleGroup defaultValue={['bold']} multiple orientation="horizontal">
<ToggleGroup.Item value="bold">
<BoldIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon class="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
<p>Vertical</p>
<ToggleGroup defaultValue={['bold']} multiple orientation="vertical" class="flex-col">
<ToggleGroup.Item value="bold">
<BoldIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon class="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
</div>Direction
Set the text direction (ltr or rtl) using the dir prop.
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
export default function Dir() {
return (
<ToggleGroup defaultValue={['bold']} multiple dir="rtl">
<ToggleGroup.Item value="bold">
<BoldIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon className="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon className="size-4" />
</ToggleGroup.Item>
</ToggleGroup>
);
}<script lang="ts">
import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/svelte';
import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';
</script>
<ToggleGroup defaultValue={['bold']} multiple dir="rtl">
<ToggleGroup.Item value="bold">
<BoldIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="italic">
<ItalicIcon class="size-4" />
</ToggleGroup.Item>
<ToggleGroup.Item value="underline">
<UnderlineIcon class="size-4" />
</ToggleGroup.Item>
</ToggleGroup>Anatomy
Here’s an overview of how the ToggleGroup component is structured in code:
import { ToggleGroup } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
<ToggleGroup>
<ToggleGroup.Item />
</ToggleGroup>
);
}<script lang="ts">
import { ToggleGroup } from '@skeletonlabs/skeleton-svelte';
</script>
<ToggleGroup>
<ToggleGroup.Item />
</ToggleGroup>API Reference
Unable to load component information for react/toggle-group
Unable to load component information for svelte/toggle-group