Select
Select picks one value from a list using the browser's native select element.
Select uses the native <select> element, so the list opens in the operating system's style. That works well on mobile and in simple forms. For options with icons, custom groups or the same look on every platform, use Dropdown.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Select, Field } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Appearance
outline (default), underline, filled-darker, filled-lighter.
Size
small (24px), medium (32px), large (40px).
Option groups & disabled
optgroup groups options; a single option or the whole Select can be disabled.
Usage
Do
- Use it for short to medium lists of plain-text values.
- Prefer Select in mobile forms: the OS picker is easy to use.
- Order options in a meaningful way (alphabetically, by frequency or logically).
Don't
- Don't use it when options need an icon, avatar or secondary text. Use Dropdown.
- Don't use it for very long lists that need search. Use Combobox.
Props
| Prop · Type | Default | Description |
|---|---|---|
| appearance"outline" | "underline" | "filled-darker" | "filled-lighter" | Default: "outline" | Control style. |
| size"small" | "medium" | "large" | Default: "medium" | Height 24 / 32 / 40px. |
| classNamestring | Default: — | Class for the outer wrapper (set the width here). |
| selectClassNamestring | Default: — | Class for the select element itself. |
| value, defaultValue, onChange, disabled…SelectHTMLAttributes | Default: — | Native select attributes. |