ToggleGroup

Full keyboard navigation.
Supports horizontal/vertical orientation.
Support single and multiple pressed buttons.
Can be controlled or uncontrolled.

Installation

ToggleGroup is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/toggle-group

Usage

ToggleGroup handles the toggle state logic. For visual grouping with border radius, compose with XGroup or YGroup. Use activeStyle to customize the active state appearance:

import { ToggleGroup, XGroup } from '@hanzo/gui'

export default () => {
  return (
    <ToggleGroup type="single">
      <XGroup>
        <XGroup.Item>
          <ToggleGroup.Item
            value="foo"
            borderRadius="$4"
            activeStyle={{ backgroundColor: '$color5' }}
          >
            Foo
          </ToggleGroup.Item>
        </XGroup.Item>
        <XGroup.Item>
          <ToggleGroup.Item
            value="bar"
            borderRadius="$4"
            activeStyle={{ backgroundColor: '$color5' }}
          >
            Bar
          </ToggleGroup.Item>
        </XGroup.Item>
      </XGroup>
    </ToggleGroup>
  )
}

For vertical layouts, use YGroup:

<ToggleGroup type="single" orientation="vertical">
  <YGroup>
    <YGroup.Item>
      <ToggleGroup.Item value="top" borderRadius="$4">
        Top
      </ToggleGroup.Item>
    </YGroup.Item>
    <YGroup.Item>
      <ToggleGroup.Item value="bottom" borderRadius="$4">
        Bottom
      </ToggleGroup.Item>
    </YGroup.Item>
  </YGroup>
</ToggleGroup>

API Reference

ToggleGroup manages toggle state and keyboard navigation. It does not render any visible element by default - use XGroup/YGroup for visual grouping.

Prop	Type	Default	Required
type	"single" \| "multiple"	-	-
value	string \| string[]	-	-
defaultValue	string \| string[]	-	-
orientation	"horizontal" \| "vertical"	"horizontal"	-
disabled	boolean	false	-
onValueChange	(value: string \| string[]) => void	-	-
loop	boolean	true	-
disableDeactivation	boolean	false	-
rovingFocus	boolean	true	-

ToggleGroup.Item

ToggleGroup.Item extends Stack views inheriting all the Gui standard props, plus:

Prop	Type	Default	Required
value	string	-	-
disabled	boolean	false	-
activeStyle	StyleProp	-	-
activeTheme	string \| null	-	-

Styling Active State

Customize the active/pressed state using activeStyle:

// Inline usage
;<ToggleGroup.Item
  value="left"
  activeStyle={{ backgroundColor: '$green9', color: '$yellow9' }}
>
  Left
</ToggleGroup.Item>

// Or via styled()
const GreenItem = styled(ToggleGroup.Item, {
  activeStyle: {
    backgroundColor: '$green9',
    color: '$yellow9',
  },
})

You can also use activeTheme to apply a theme when active:

<ToggleGroup.Item value="option1" activeTheme="green">
  Option 1
</ToggleGroup.Item>

useToggleGroupItem

For custom components inside ToggleGroup.Item that need to know the active state, use the useToggleGroupItem hook:

import { useToggleGroupItem, ToggleGroup } from '@hanzogui/toggle-group'

function CustomLabel({ children }) {
  const { active, color } = useToggleGroupItem()
  return <Text color={active ? '$green10' : '$color'}>{children}</Text>
}

// Usage
;<ToggleGroup.Item value="option1">
  <CustomLabel>Option 1</CustomLabel>
</ToggleGroup.Item>

ToggleGroup

Installation

Usage

API Reference

ToggleGroup

ToggleGroup.Item

Styling Active State

useToggleGroupItem

On this page