ToggleGroup

The ToggleGroup component provides a set of two-state buttons that can be toggled on or off.

This component is based on the Radix-UI Toggle Group Primitive. All of the exposed APIs and components are exposed here, just some are styled to fit the StreamElements design system.

Basic usage

import { ToggleGroup } from '@streamelements/frontend-ui';

export function ToggleGroupExample() {
  return (
    <ToggleGroup.Root type="multiple">
      <ToggleGroup.Item value="left" aria-label="Left">
        Left
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" aria-label="Center">
        Center
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" aria-label="Right">
        Right
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}

Props

Root

Name	Type	Default value	Description
type	single | multiple	-	Determines whether a single or multiple items can be pressed at a time
value	string | string[]	- | []	The controlled value or values of the ToggleGroup, can be passed as a single value or an array, depending on the type prop
defaultValue	string | string[]	- | []	The value(s) of the item(s) to show as pressed when initially rendered. Use when you do not need to control the state of the items.
onValueChange	(value: string) => void | (value: string[]) => void	-	Event handler called when the pressed state of an item changes

Item

Name	Type	Default value	Description
value*	string	–	A unique value for the item
disabled	boolean	–	When true, prevents the user from interacting with the item

Check out more detailed docs on Radix docs