> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 选择

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/what-is-twenty/20.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=2063e7c602fea7329b99090fcbeac21c" alt="标题" width="597" height="281" data-path="images/user-guide/what-is-twenty/20.png" />
</Frame>

允许用户从预定义选项列表中选择一个值。

<Tabs>
  <Tab title="**用法**">
    ```jsx theme={null}
    import { IconTwentyStar } from 'twenty-ui/display';

    import { Select } from '@/ui/input/components/Select';

    export const MyComponent = () => {

      return (
        <Select
          className
          disabled={false}
          label="Select an option"
          options={[
            { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
            { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
          ]}
          value="option1"
        />
      );
    };

    ```
  </Tab>

  <Tab title="属性">
    | 属性        | 类型  | 描述                                                               |
    | --------- | --- | ---------------------------------------------------------------- |
    | className | 字符串 | 用于额外样式的可选 CSS 类                                                  |
    | 禁用        | 布尔值 | 当设置为`true`时，禁用用户与组件的交互                                           |
    | 标签        | 字符串 | 描述`选择`组件用途的标签                                                    |
    | onChange  | 函数  | 当所选值更改时调用的函数                                                     |
    | 选项        | 数组  | 表示`选择`组件的可用选项。 它是一个对象数组，每个对象具有一个`值`（唯一标识符）、`标签`（唯一标识符）和一个可选的`图标` |
    | 值         | 字符串 | 表示当前选择的值。 它应匹配`选项`数组中的一个`值`属性                                    |
  </Tab>
</Tabs>