Forms

Select

Pick one value from a short list. A button opens a listbox in the top layer (the native popover API, so it is never clipped by a parent; it closes on outside click, Escape and Tab). Keyboard: Enter, Space or arrows open; arrows, Home and End move; typing jumps to a matching option; Enter or Space picks.

For long lists where people type to search, use Combobox.

Framework

demos/select.tsx

import { Field } from "pixelbits/field";
import { Select } from "pixelbits/select";

const frameworks = [
  { value: "astro", label: "Astro" },
  { value: "next", label: "Next.js", description: "React" },
  { value: "remix", label: "Remix", disabled: true },
  { value: "vite", label: "Vite" },
];

export default function Demo() {
  return (
    <Field label="Framework" className="w-full max-w-sm">
      <Select options={frameworks} defaultValue="next" />
    </Field>
  );
}

Installation

npm: import

import { Select } from "pixelbits/select";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/select.json

API

<Select>

For long lists where people type to search, use Combobox.

Example

<Field label="Framework">
  <Select
    options={[{ value: "next", label: "Next.js" }, { value: "astro", label: "Astro" }]}
    defaultValue="next"
  />
</Field>

Prop	Type	Default	Description
options*	Option[]	—	The choices, in order.
value	string	—	The selected value (controlled). Use `""` for none.
defaultValue	string	—	The value selected at first (uncontrolled).
onValueChange	(value: string) => void	—	Called with the value the user picked.
placeholder	string	"Select…"	Text shown when nothing is selected.
name	string	—	Form field name: a hidden input carries the value in form submissions.
size	"sm" \| "md" \| "lg"	"md"	Height: `"sm"` 32 px, `"md"` 40 px, `"lg"` 48 px.

Also accepts every prop of Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange">.