Select

import { Select, SelectTrigger, SelectContent, SelectItem } from "@brijbyte/md3-react/select";

@import "@brijbyte/md3-react/menu.css";
@import "@brijbyte/md3-react/text-field.css";
@import "@brijbyte/md3-react/select.css";

MD3 specs the select as a menu opened from a text field, so this component reuses both: the trigger is a real <button> wearing the text field's anatomy (floating label, filled or outlined container, supporting text), and the popup is the menu's container and item styling. Built on Base UI's Select, it keeps typeahead, keyboard navigation, and form integration (a hidden input carries name/required) for free.

Variants

The trigger comes in the same filled and outlined variants as the text field. The dropdown arrow rotates while the menu is open, and the open menu shows the focused field treatment even though focus moves into the popup.

Single- and multi-select

A selected option fills with secondary-container and gains a leading checkmark. Add multiple for multi-select: the menu stays open while choosing, and renderValue formats the array shown in the trigger.

Scrolling

The menu matches the trigger's width, grows for longer options, and scrolls when the options don't fit — cap it with max-height (or let the viewport do it) and the list shows a scrollbar, per the guidelines.

Supporting text, errors, and disabled

The field states carry over from the text field unchanged: supportingText renders below the container, error recolors label/outline/supporting text, and disabled washes the whole field to the spec's 38%/12% opacities.