Get Started
FormsUpdated May 3, 2026

Select

Choose one value from a constrained list with accessible keyboard behavior.

#Default usage

Default selectUse a placeholder when no value has been chosen.

#Usage

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

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

#Patterns

Disabled selectDisabled controls stay readable without becoming too pale.

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

Edit this page