Component · popover + listbox

Select

The popup button. Opens a listbox in the top layer, works in forms.

Install

npx @lazizbekio/mitame add select

Usage

import { Select } from "@/components/mitame/ui/select";

export default function SelectDemo() {
  return (
    <Select
      aria-label="Era"
      name="era"
      defaultValue="y2k"
      options={[
        { value: "vintage", label: "Vintage · 1984" },
        { value: "y2k", label: "Y2K · 2001" },
        { value: "now", label: "Now · 2026" },
        { value: "remix", label: "Remix", disabled: true },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`options`	`{ value, label, disabled? }[]`	—	The choices.
`value / defaultValue`	`string`	—	Controlled or uncontrolled value.
`onValueChange`	`(value: string) => void`	—	Called when a choice is made.
`placeholder`	`ReactNode`	`"Select…"`	Shown when nothing is selected.
`name`	`string`	—	Adds a hidden input so the value is sent with forms.
`aria-label / aria-labelledby`	`string`	—	Give it a name.

Keyboard

Key	Does
`↓ / ↑ on the button`	Open
`↓ ↑ Home End`	Move
`Type letters`	Jump to a match
`Enter / Space`	Choose
`Esc`	Close

Styling

Every part has a data-slot starting with select, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.