Extends functionality the Toggle Group radix component

Lets users toggle between a group of limited options(Suggested range is 2-6 options).

Functionality based on the ToggleGroup radix component, which already allows for: single/multiple select, disabling or partly disabling options, adds keyboard navigation and orientation and more.

Extends visually by allowing for different sizing, vertical/horizontal display and gaps using the Stack component. When there is no gap, rounds the border for only the edge/outer corners.

Orientation

orientation="vertical | horizontal"

Edit me!

Gap

gap={0 | 1 | 2 | ... | 9}

<ToggleGroup.Root type="single" gap={3}>
<ToggleGroup.Button value="a">A</ToggleGroup.Button>
<ToggleGroup.Button value="b">B</ToggleGroup.Button>
</ToggleGroup.Root>

Size

size="sm | md | lg"

<ToggleGroup.Root type="single" gap={3}>
<ToggleGroup.Button value="a" size="sm">
<Icon is={Upload} /> A
</ToggleGroup.Button>
<ToggleGroup.Button value="b" size="sm">
B
</ToggleGroup.Button>
<ToggleGroup.Button value="icon" size="sm">
<Icon is={Upload} />
</ToggleGroup.Button>
</ToggleGroup.Root>

Full width

isFullWidth={boolean}

<ToggleGroup.Root type="multiple" isFullWidth gap={3}>
<ToggleGroup.Button value="a">A</ToggleGroup.Button>
<ToggleGroup.Button value="b">B</ToggleGroup.Button>
<ToggleGroup.Button value="c">C</ToggleGroup.Button>
</ToggleGroup.Root>

Disabled

Partly

<ToggleGroup.Root type="multiple" gap={3} defaultValue="a">
<ToggleGroup.Button value="a">A</ToggleGroup.Button>
<ToggleGroup.Button value="b">B</ToggleGroup.Button>
<ToggleGroup.Button value="c" disabled>
C
</ToggleGroup.Button>
</ToggleGroup.Root>

Fully

<ToggleGroup.Root type="multiple" gap={3} defaultValue="a" disabled>
<ToggleGroup.Button value="a">A</ToggleGroup.Button>
<ToggleGroup.Button value="b">B</ToggleGroup.Button>
<ToggleGroup.Button value="c">C</ToggleGroup.Button>
</ToggleGroup.Root>

API Reference

ToggleGroupRoot

PropTypeDefaultRequired
disabled
boolean

-

-

type
"single" | "multiple"

-

value
string | string[]

-

-

defaultValue
string | string[]

-

-

dir
"ltr" | "rtl"

-

-

asChild
boolean

-

-

onValueChange
(value: string) => void | (value: string[]) => void

-

-

rovingFocus
boolean

-

-

loop
boolean

-

-

orientation
"horizontal" | "vertical"
horizontal

-

isFullWidth
boolean

-

-

hasGap
boolean

-

-

direction
"row" | "column"

-

-

cssCSSProperties

-

-

gap
number

-

wrap
"wrap" | "wrap-reverse" | "no-wrap"
no-wrap

-

ToggleGroup.Button

PropTypeDefaultRequired
valuestring

-

asChild
boolean

-

-

size
"sm" | "md" | "lg"
md

-

isIconOnly
boolean

-

-

cssCSSProperties

-

-

ToggleGroup.Item

PropTypeDefaultRequired
valuestring

-

asChild
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-