---
title: 선택
image: /images/user-guide/what-is-twenty/20.png
---

<Frame>
  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
</Frame>

사용자가 미리 정의된 옵션 목록에서 값을 선택할 수 있도록 합니다.

<Tabs>
<Tab title="Usage">

```jsx
import { RecoilRoot } from 'recoil';
import { IconTwentyStar } from 'twenty-ui/display';

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

export const MyComponent = () => {

  return (
    <RecoilRoot>
      <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"
      />
    </RecoilRoot>
  );
};

```

</Tab>
<Tab title="Props">

| 프로퍼티     | 유형       | 설명                                                                                                                                                                   |
| -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 클래스 네임   | 문자열      | 추가 스타일링을 위한 선택적 CSS 클래스                                                                                                                                              |
| disabled | 부울       | `true`로 설정하면 사용자는 이 구성 요소와 상호작용할 수 없습니다.                                                                                                             |
| 라벨       | 문자열      | `선택` 구성 요소의 목적을 설명하는 라벨                                                                                                                                              |
| onChange | function | 선택된 값이 변경될 때 호출되는 함수                                                                                                                                                 |
| 옵션       | 배열       | `선택된` 구성 요소에 사용할 수 있는 옵션들을 나타냅니다. 각 객체에는 `값`(고유 식별자), `라벨`(고유 식별자) 및 선택적 `아이콘`이 포함된 객체의 배열입니다. |
| 값        | 문자열      | 현재 선택된 값을 나타냅니다. `옵션` 배열에서 하나의 `값` 속성과 일치해야 합니다.                                                                                     |

</Tab>
</Tabs>
