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

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

Laat gebruikers toe om 'n waarde uit 'n lys van voorafbepaalde opsies te kies.

<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">

| Eienskappe    | Tipe       | Beskrywing                                                                                                                                                                                                                                                                     |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| klasNaam      | string     | Opsionele CSS-klas vir addisionele stylering                                                                                                                                                                                                                                   |
| gedeaktiveer  | booleaanse | Wanneer gestel op `true`, deaktiveer gebruikersinteraksie met die komponent                                                                                                                                                                                                    |
| etiket        | string     | Die etiket om die doel van die `Kies` komponent te beskryf                                                                                                                                                                                                                     |
| opVerandering | funksie    | Die funksie wat geroep word wanneer die gekose waardes verander                                                                                                                                                                                                                |
| opsies        | reeks      | Represents the options available for the `Selected` component. Dit is 'n reeks voorwerpe waar elke voorwerp 'n `waarde` (die unieke identifiseerder), `etiket` (die unieke identifiseerder), en 'n opsionele `Ikoon` het |
| waarde        | string     | Verteenwoordig die huidiglik gekose waarde. Dit moet ooreenstem met een van die `waarde` eienskappe in die `opsies` reeks                                                                                                                                      |

</Tab>
</Tabs>