Toggle Group

View source Report an issue Edit this page

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"


<ToggleGroup.Root type="multiple" orientation="vertical">
  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
</ToggleGroup.Root><ToggleGroup.Root type="multiple" orientation="vertical">
  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
</ToggleGroup.Root>
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

Prop	Type	Default	Required
`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"`	-	-
`css`	`CSSProperties`	-	-
`gap`	`number`		-
`wrap`	`"wrap"` \| `"wrap-reverse"` \| `"no-wrap"`	`no-wrap`	-

ToggleGroup.Button

Prop	Type	Default	Required
`value`	`string`	-
`asChild`	`boolean`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	`md`	-
`isIconOnly`	`boolean`	-	-
`css`	`CSSProperties`	-	-

ToggleGroup.Item

Prop	Type	Default	Required
`value`	`string`	-
`asChild`	`boolean`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`css`	`CSSProperties`	-	-