Toggle Group

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

Gap

gap={0 | 1 | 2 | 3}

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

Modern theme

<ToggleGroup.Root type="single" defaultValue="a" theme="modern">
  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
  <ToggleGroup.Button value="c">C</ToggleGroup.Button>
</ToggleGroup.Root>

Disable Deselect

disableDeselect={boolean}

By default the ToggleGroup allows itself to be entirely deselected even after a value has been chosen. This property disables this deselect funcionality, always keeping a value selected after first selection. Similar to how radios work.

<ToggleGroup.Root type="multiple" disableDeselect>
  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
  <ToggleGroup.Button value="c">C</ToggleGroup.Button>
</ToggleGroup.Root>