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

For toolbar and page-header filters, put a short visible context inside the trigger. The muted context and selected value share one control, with the chevron aligned at the edge. Long values truncate within the available width. Keep external FormField labels for forms.

<Select value={branch} onValueChange={setBranch}>
  <SelectTrigger aria-label="Branch" contextLabel="Branch">
    <SelectValue placeholder="All branches" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="all">All branches</SelectItem>
    <SelectItem value="tebet">Tebet</SelectItem>
  </SelectContent>
</Select>

#Accessibility

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

#API

• Select: value, defaultValue, onValueChange, and disabled.
• SelectTrigger accepts contextLabel for an inline filter label. It, 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.

#Inline editing

Use <SelectTrigger variant="inline"> for compact record editing. Its styling is identical inside and outside a table. A contextLabel keeps toolbar selects compact without relying on PageHeader CSS.