Select

Select defines how EnterUI handles choose one value from a constrained list with accessible keyboard behavior, including default structure, accessible states, and token-driven styling.

#Default usage

<Select defaultValue="team">
  <SelectTrigger aria-label="Visibility">
    <SelectValue placeholder="Choose visibility" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="private">Private</SelectItem>
    <SelectItem value="team">Team</SelectItem>
    <SelectItem value="public">Public</SelectItem>
  </SelectContent>
</Select>

#Import

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Select uses Radix listbox behavior, typeahead, highlighted items, selected item semantics, and keyboard interaction.

#API

• Select: value, defaultValue, onValueChange, and disabled.
• SelectTrigger, SelectContent, and SelectItem support className.
• SelectGroup, SelectLabel, and SelectSeparator are exported.

#Styling

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