# Select · JGuang UI

> Displays a list of options for the user to pick from—triggered by a button.

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/radix/select
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `select-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/radix/select


## Installation


  

**Command**


  

**Manual**


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


### Install the following dependencies:


```bash
npm install radix-ui
```


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


[View complete source: components/ui/select.tsx](/r/jguang-ui/radix/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
<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="light">Light</SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</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 the `position` prop on `SelectContent` to control alignment. When `position="item-aligned"` (default), the popup positions so the selected item appears over the trigger. When `position="popper"`, the popup aligns to the trigger edge.


> Example `select-align-item`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/radix/select


## Groups

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


> Example `select-groups`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/radix/select


## Scrollable

A select with many items that scrolls.


> Example `select-scrollable`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/radix/select


## Disabled


> Example `select-disabled`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/radix/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>
```


> Example `select-invalid`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/radix/select


## RTL

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


> Example `select-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/radix/select


## API Reference

See the [Radix UI Select](https://www.radix-ui.com/docs/primitives/components/select#api-reference) documentation.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt