Toggle Group

The ToggleGroup component provides a set of toggle buttons that can be used to switch between different states or options. It is composed of subcomponents such as ToggleGroup.Root and ToggleGroup.Item to offer a structured and customizable interface.

Usage

import { ToggleGroup } from '@harnessio/ui/components'

// ...

return (
  <ToggleGroup.Root onValueChange={updateControlledInputValue} value={controlledInputValue} type="single">
    <ToggleGroup.Item value="1">Option 1</ToggleGroup.Item>
    <ToggleGroup.Item value="2">Option 2</ToggleGroup.Item>
    <ToggleGroup.Item value="3">Option 3</ToggleGroup.Item>
  </ToggleGroup.Root>
)

Anatomy

All parts of the Toggle Group component can be imported and composed as required.

<ToggleGroup.Root variant="compact">
  <ToggleGroup.Item value="1">Option 1</ToggleGroup.Item>
  <ToggleGroup.Item value="2">Option 2</ToggleGroup.Item>
  <ToggleGroup.Item value="3">Option 3</ToggleGroup.Item>
</ToggleGroup.Root>

API Reference

Root

The Root component serves as the main container for all toggle group elements.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
variant	false	default	'default' | 'outline' | 'compact'
type	true		'single' | 'multiple'
value	false		string | string[]
defaultValue	false		string | string[]
onValueChange	false		(value: string | string[]) => void
disabled	false	false	boolean
rovingFocus	false	true	boolean
loop	false	true	boolean
orientation	false	horizontal	'horizontal' | 'vertical'

Item

The Item component is used to define each toggle button within the group.

<ToggleGroup.Item value="1">Option 1</ToggleGroup.Item>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
value	true		string
variant	false	default	'default' | 'outline' | 'compact'
size	false	default	'default' | 'sm' | 'lg' | 'xs'
disabled	false	false	boolean
pressed	false	false	boolean
defaultPressed	false	false	boolean
onPressedChange	false		(pressed: boolean) => void