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 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 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 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 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 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 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

ToggleGroup.Root

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-orientation`	`——`	The orientation of the toggle group.
`data-toggle-group-root`	`——`	Present on the root element.

ToggleGroup.Item

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

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.

🚧 UNDER CONSTRUCTION 🚧