SegmentedControl

SegmentedControl is for choosing one mode from a short set, such as list versus grid, day versus week, or simple filters.

#Default usage

<SegmentedControl defaultValue="list" aria-label="View mode">
  <SegmentedControlItem value="list">List</SegmentedControlItem>
  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>
  <SegmentedControlItem value="table">Table</SegmentedControlItem>
</SegmentedControl>

#Import

import {
  SegmentedControl,
  SegmentedControlItem,
} from "@froggdesign/enter-ui-react";

#States

#Accessibility

SegmentedControl renders a radiogroup with radio items. Provide aria-label when there is no visible label.

#API

• value, defaultValue, and onValueChange control the selected item.
• disabled disables all items.
• fullWidth stretches the group and distributes items evenly. The default keeps its content width, including inside Grid and VStack.
• SegmentedControlItem requires a string value.
• Supports native props and className.

#Styling

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