Toggle Group
A control element that switches between two states, providing a binary choice.
<script lang="ts">
import { ToggleGroup } from "$lib";
import { TextB, TextItalic, TextStrikethrough } from "phosphor-svelte";
let value: string[] | undefined = ["bold"];
</script>
<ToggleGroup.Root
bind:value
type="multiple"
class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-border bg-background px-[5px] py-1 shadow-mini"
>
<ToggleGroup.Item
aria-label="toggle bold"
value="bold"
class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
>
<TextB class="sq-6" />
</ToggleGroup.Item>
<ToggleGroup.Item
aria-label="toggle italic"
value="italic"
class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
>
<TextItalic class="sq-6" />
</ToggleGroup.Item>
<ToggleGroup.Item
aria-label="toggle strikethrough"
value="strikethrough"
class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
>
<TextStrikethrough class="sq-6" />
</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import { ToggleGroup } from "$lib";
import { TextB, TextItalic, TextStrikethrough } from "phosphor-svelte";
let value: string[] | undefined = ["bold"];
</script>
<ToggleGroup.Root
bind:value
type="multiple"
class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-border bg-background px-[5px] py-1 shadow-mini"
>
<ToggleGroup.Item
aria-label="toggle bold"
value="bold"
class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
>
<TextB class="sq-6" />
</ToggleGroup.Item>
<ToggleGroup.Item
aria-label="toggle italic"
value="italic"
class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
>
<TextItalic class="sq-6" />
</ToggleGroup.Item>
<ToggleGroup.Item
aria-label="toggle strikethrough"
value="strikethrough"
class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
>
<TextStrikethrough class="sq-6" />
</ToggleGroup.Item>
</ToggleGroup.Root>
Structure
<script lang="ts">
import { ToggleGroup } from "bits-ui";
</script>
<ToggleGroup.Root>
<ToggleGroup.Item value="bold">bold</ToggleGroup.Item>
<ToggleGroup.Item value="italic">italic</ToggleGroup.Item>
</ToggleGroup.Root>
<script lang="ts">
import { ToggleGroup } from "bits-ui";
</script>
<ToggleGroup.Root>
<ToggleGroup.Item value="bold">bold</ToggleGroup.Item>
<ToggleGroup.Item value="italic">italic</ToggleGroup.Item>
</ToggleGroup.Root>
Component API
The root component which contains the toggle group items.
| Property | Type | Description |
|---|---|---|
value | string | string[] | The value of the toggle group. If the type is multiple, this will be an array of strings, otherwise it will be a string. Default:
—— undefined |
onValueChange | function | A callback function called when the value of the toggle group changes. The type of the value is dependent on the type of the toggle group. Default:
—— undefined |
disabled | boolean | Whether or not the switch is disabled. Default:
false |
loop | boolean | Whether or not the toggle group should loop when navigating. Default:
true |
orientation | 'horizontal' | 'vertical' | The orientation of the toggle group. Default:
horizontal |
rovingFocus | boolean | Whether or not the toggle group should use roving focus when navigating. Default:
true |
type | 'single' | 'multiple' | The type of toggle group. Default:
single |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
—— undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-orientation | —— | The orientation of the toggle group. |
data-toggle-group-root | —— | Present on the root element. |
An individual toggle item within the group.
| Property | Type | Description |
|---|---|---|
value | string | The value of the item. Default:
—— undefined |
disabled | boolean | Whether or not the switch is disabled. Default:
false |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
el | HTMLButtonElement | The underlying DOM element being rendered. You can bind to this to programatically interact with the element. Default:
—— undefined |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | Whether the toggle item is in the on or off state. |
data-value | —— | The value of the toggle item. |
data-orientation | —— | The orientation of the toggle group. |
data-disabled | —— | Present when the toggle item is disabled. |
data-toggle-group-item | —— | Present on the item elements. |