ToggleGroup

#Default usage

#Usage

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

export function Example() {
  return (
    <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>
  );
}

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