# 选择器 · JGuang UI

> 从可折叠的选项列表中选择一项。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `select-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Install the following dependencies:


```bash
npm install @base-ui/react
```


### Copy and paste the following code into your project.


[View complete source: components/ui/select.tsx](/r/jguang-ui/base/select.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
```

```tsx showLineNumbers
const items = [
  { label: "Light", value: "light" },
  { label: "Dark", value: "dark" },
  { label: "System", value: "system" },
]

<Select items={items}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {items.map((item) => (
        <SelectItem key={item.value} value={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>
```

## Composition

Use the following composition to build a `Select`:

```text
Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem
```

## Align Item With Trigger

Use `alignItemWithTrigger` on `SelectContent` to control whether the selected item aligns with the trigger. When `true` (default), the popup positions so the selected item appears over the trigger. When `false`, the popup aligns to the trigger edge.


> 示例 `select-align-item`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select


## Groups

Use `SelectGroup`, `SelectLabel`, and `SelectSeparator` to organize items.


> 示例 `select-groups`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select


## Scrollable

A select with many items that scrolls.


> 示例 `select-scrollable`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select


## Disabled


> 示例 `select-disabled`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select


## Invalid

Add the `data-invalid` attribute to the `Field` component and the `aria-invalid` attribute to the `SelectTrigger` component to show an error state.

```tsx showLineNumbers /data-invalid/ /aria-invalid/
<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>
```


> 示例 `select-invalid`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> 示例 `select-rtl`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/base/select


## API Reference

See the [Base UI Select](https://base-ui.com/react/components/select#api-reference) documentation.

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt