Toggle Group
llms.txtExample
Usage
<ToggleGroup type="single" bind:value> <ToggleGroupItem value="1">1</ToggleGroupItem> <ToggleGroupItem value="2">2</ToggleGroupItem> <ToggleGroupItem value="3">3</ToggleGroupItem> </ToggleGroup>
API Reference
ToggleGroup
A group of toggle buttons where one or multiple can be pressed. Built on top of the bits-ui ToggleGroup primitive.
Property Type Description
type required
enum
Whether a single or multiple items can be pressed at a time.
value $bindable
union
The currently pressed value(s). A string when type is "single", an array when "multiple". Default: —
onValueChange
function
A callback invoked when the pressed value changes. Default: —
variant
enum
The visual variant of the toggle group items. Default:
'default'size
enum
The size of the toggle group items. Default:
'default'disabled
boolean
Whether the entire toggle group is disabled. Default:
falseloop
boolean
Whether keyboard navigation loops from last item to first and vice versa. Default:
trueorientation
enum
The orientation of the toggle group for keyboard navigation. Default:
'horizontal'rovingFocus
boolean
Whether the toggle group uses roving focus management. Default:
trueclass
string
Additional CSS classes to apply. Default: —
ref $bindable
HTMLElement
The underlying DOM element. Default: —
Property
type
value
onValueChange
variant
size
disabled
loop
orientation
rovingFocus
class
ref
ToggleGroupItem
A single item within a toggle group.
Property Type Description
value required $bindable
string
The value of this toggle item.
variant
enum
Override the visual variant for this specific item. Falls back to the parent ToggleGroup variant. Default: —
size
enum
Override the size for this specific item. Falls back to the parent ToggleGroup size. Default: —
disabled
boolean
Whether this item is disabled. Default:
falseclass
string
Additional CSS classes to apply. Default: —
ref $bindable
HTMLElement
The underlying DOM element. Default: —
Property
value
variant
size
disabled
class
ref