ToggleGroup

ToggleGroup defines how EnterUI handles a compact single or multiple selection control, including default structure, accessible states, and token-driven styling.

#Default usage

<ToggleGroup type="single" defaultValue="list" aria-label="View mode">
  <ToggleGroupItem value="list">List</ToggleGroupItem>
  <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
  <ToggleGroupItem value="chart">Chart</ToggleGroupItem>
</ToggleGroup>

#Import

import { ToggleGroup, ToggleGroupItem } from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

ToggleGroup uses Radix toggle group semantics and keyboard behavior. Provide an accessible label for the group.

#API

• ToggleGroup accepts Radix root props including type, value, defaultValue, and orientation.
• ToggleGroupItem requires value.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.