> ## 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.

# Seleziona

> Scegli uno o più valori da un elenco popup di opzioni.

## Panoramica

Usa `Select` per un valore di modulo scelto da un elenco. [Dropdown](https://docs.twenty.com/it/ui/components/navigation/dropdown.md) rimane l'API di livello superiore principale per menu, selettori, pannelli e pagine che combinano tali workflow.

**Light**

[Esempio di Select (light)](https://storybook.twenty.com/iframe.html?id=ui-input-select--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di Select (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-select--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-select--display)

## Utilizzo

### Stato non controllato

Usa `defaultValue` per impostare la priorità iniziale. Il componente select gestisce le modifiche successive alla selezione.

```tsx theme={null}
import { Select } from 'twenty-ui/primitives/input';

const PRIORITIES = [
  { value: 'low', label: 'Low' },
  { value: 'normal', label: 'Normal' },
  { value: 'high', label: 'High' },
];

export const PrioritySelect = () => (
  <Select.Root name="priority" defaultValue="normal" items={PRIORITIES}>
    <Select.Trigger aria-label="Priority">
      <Select.Value placeholder="Choose a priority" />
      <Select.Icon />
    </Select.Trigger>
    <Select.Portal>
      <Select.Positioner
        align="start"
        sideOffset={8}
        alignItemWithTrigger={false}
      >
        <Select.Popup>
          {PRIORITIES.map(({ value, label }) => (
            <Select.Item key={value} value={value}>
              <Select.ItemText>{label}</Select.ItemText>
              <Select.ItemIndicator />
            </Select.Item>
          ))}
        </Select.Popup>
      </Select.Positioner>
    </Select.Portal>
  </Select.Root>
);
```

Fornisci `items` a `Root` affinché `Value` visualizzi l'etichetta dell'elemento selezionato; senza di essi, il trigger mostra il valore non elaborato. Il valore selezionato può essere `null` quando non è selezionato nulla.

## Anatomia

Componi le parti pubbliche all'interno di `Select.Root`. `Trigger` e `Item` eseguono il rendering solo dei rispettivi elementi figlio. Aggiungi esplicitamente `Icon`, `ItemText` e `ItemIndicator` quando desideri il chevron, l'etichetta e il segno di spunta predefiniti.

```text theme={null}
Select.Root
├── Select.Label
├── Select.Trigger
│   ├── Select.Value
│   └── Select.Icon
└── Select.Portal
    ├── Select.Backdrop
    └── Select.Positioner
        └── Select.Popup
            ├── Select.Arrow
            ├── Select.ScrollUpArrow
            ├── Select.List
            │   ├── Select.Group
            │   │   ├── Select.GroupLabel
            │   │   └── Select.Item
            │   │       ├── Select.ItemText
            │   │       └── Select.ItemIndicator
            │   └── Select.Separator
            └── Select.ScrollDownArrow
```

| Parte | Scopo |
| - | - |
| `Root` | Gestisce la selezione, lo stato di apertura, i valori generici e l'integrazione con i moduli nativi. |
| `Label` | Associa un'etichetta visibile al trigger. |
| `Trigger` | Apre l'elenco e contiene il valore visualizzato. |
| `Valore` | Renderizza l'etichetta selezionata o un segnaposto. |
| `Icon` | Renderizza un chevron predefinito o elementi figlio personalizzati nel trigger. |
| `Portal` | Sposta il contenuto del popup nel contenitore del portal del tema o in un contenitore esplicito. |
| `Backdrop` | Fornisce uno sfondo facoltativo mentre il popup è aperto. |
| `Positioner` | Gestisce la geometria dell'ancora, il posizionamento, gli offset e il comportamento in caso di collisioni. |
| `Popup` | Renderizza la superficie del popup senza aggiungere un portal o un positioner. |
| `Elenco` | Fornisce un contenitore di scorrimento separato per le opzioni. |
| `Item` | Fornisce il comportamento di selezione per un'opzione. |
| `ItemText` | Identifica l'etichetta dell'opzione utilizzata per la ricerca durante la digitazione e l'allineamento del valore selezionato. |
| `ItemIndicator` | Renderizza il segno di spunta predefinito dell'opzione selezionata o elementi figlio personalizzati. |
| `Arrow` | Posiziona una freccia facoltativa rispetto all'ancora del popup. |
| `ScrollUpArrow`, `ScrollDownArrow` | Fa scorrere un elenco lungo al passaggio del mouse. |
| `Group`, `GroupLabel` | Raggruppa le opzioni correlate sotto un'etichetta. |
| `Separator` | Separa visivamente i gruppi. |

`Portal`, `List`, `Backdrop`, le frecce e gli indicatori sono facoltativi. Usa `Positioner` intorno a `Popup` per il posizionamento, anche quando renderizzi il popup in linea senza un portal.

## Stato controllato

Passa `value` e aggiornalo con `onValueChange` per gestire la stessa priorità nello stato di React. Il callback riceve il valore successivo e i dettagli dell'evento.

```tsx theme={null}
import { useState } from 'react';
import { Select } from 'twenty-ui/primitives/input';

const PRIORITIES = [
  { value: 'low', label: 'Low' },
  { value: 'normal', label: 'Normal' },
  { value: 'high', label: 'High' },
];

export const PrioritySelect = () => {
  const [priority, setPriority] = useState<string | null>('normal');

  return (
    <Select.Root
      name="priority"
      value={priority}
      onValueChange={setPriority}
      items={PRIORITIES}
    >
      <Select.Trigger aria-label="Priority">
        <Select.Value placeholder="Choose a priority" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner
          align="start"
          sideOffset={8}
          alignItemWithTrigger={false}
        >
          <Select.Popup>
            {PRIORITIES.map(({ value, label }) => (
              <Select.Item key={value} value={value}>
                <Select.ItemText>{label}</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            ))}
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  );
};
```

## Selezione multipla

```tsx theme={null}
import { useState } from 'react';
import { Select } from 'twenty-ui/primitives/input';

const LANGUAGES = [
  { value: 'en', label: 'English' },
  { value: 'fr', label: 'French' },
  { value: 'es', label: 'Spanish' },
];

export const LanguageSelect = () => {
  const [languages, setLanguages] = useState<string[]>(['en']);

  return (
    <Select.Root
      multiple
      value={languages}
      onValueChange={setLanguages}
      items={LANGUAGES}
    >
      <Select.Trigger aria-label="Languages">
        <Select.Value placeholder="Choose languages" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner
          align="start"
          sideOffset={8}
          alignItemWithTrigger={false}
        >
          <Select.Popup>
            {LANGUAGES.map(({ value, label }) => (
              <Select.Item key={value} value={value}>
                <Select.ItemText>{label}</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            ))}
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  );
};
```

Con `multiple`, il valore è un array. Usa `defaultValue={['en']}` anziché `value` e `onValueChange` per una selezione multipla non controllata. I tipi generici della radice rappresentano il valore dell'opzione e se la selezione multipla è abilitata.

## Stato di apertura

La selezione e la visibilità del popup sono indipendenti. Gli esempi precedenti lasciano la visibilità del popup non controllata. La selezione di un singolo valore chiude il popup; la selezione multipla lo mantiene aperto. Usa `defaultOpen` per impostare la visibilità iniziale; per impostazione predefinita è `false`.

Passa `open` e aggiornalo con `onOpenChange` per controllare la visibilità. Questo esempio controlla il popup lasciando non controllata la priorità selezionata.

```tsx theme={null}
import { useState } from 'react';
import { Select } from 'twenty-ui/primitives/input';

const PRIORITIES = [
  { value: 'low', label: 'Low' },
  { value: 'normal', label: 'Normal' },
  { value: 'high', label: 'High' },
];

export const PrioritySelect = () => {
  const [open, setOpen] = useState(false);

  return (
    <Select.Root
      name="priority"
      defaultValue="normal"
      items={PRIORITIES}
      open={open}
      onOpenChange={setOpen}
    >
      <Select.Trigger aria-label="Priority">
        <Select.Value placeholder="Choose a priority" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner
          align="start"
          sideOffset={8}
          alignItemWithTrigger={false}
        >
          <Select.Popup>
            {PRIORITIES.map(({ value, label }) => (
              <Select.Item key={value} value={value}>
                <Select.ItemText>{label}</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            ))}
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  );
};
```

## Combina con un campo

Racchiudi il select in `Field.Root` per associare il relativo trigger a un'etichetta visibile e a un testo di supporto. Il campo gestisce l'etichettatura e la convalida; il select mantiene il proprio stato di selezione e popup.

```tsx theme={null}
import { Field, Select } from 'twenty-ui/primitives/input';

const PRIORITIES = [
  { value: 'low', label: 'Low' },
  { value: 'normal', label: 'Normal' },
  { value: 'high', label: 'High' },
];

export const PriorityField = () => (
  <Field.Root name="priority">
    <Field.Label>Priority</Field.Label>
    <Select.Root name="priority" defaultValue="normal" items={PRIORITIES}>
      <Select.Trigger>
        <Select.Value />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner
          align="start"
          sideOffset={8}
          alignItemWithTrigger={false}
        >
          <Select.Popup>
            {PRIORITIES.map(({ value, label }) => (
              <Select.Item key={value} value={value}>
                <Select.ItemText>{label}</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            ))}
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
    <Field.Description>
      Choose how soon this record needs attention.
    </Field.Description>
  </Field.Root>
);
```

## Composizione degli elementi

Componi contenuti arbitrari all'interno di `Item`. Inserisci l'etichetta ricercabile in `ItemText`; il contenuto aggiuntivo non diventa la relativa etichetta per la ricerca durante la digitazione. Fornisci elementi figlio a `Icon` o `ItemIndicator` per sostituire le relative icone predefinite, oppure ometti del tutto tali parti.

```tsx theme={null}
import { Select } from 'twenty-ui/primitives/input';

export const PrioritySelect = () => (
  <Select.Root defaultValue="high" items={{ high: 'High' }}>
    <Select.Trigger aria-label="Priority">
      <Select.Value />
      <Select.Icon />
    </Select.Trigger>
    <Select.Portal>
      <Select.Positioner
        align="start"
        sideOffset={8}
        alignItemWithTrigger={false}
      >
        <Select.Popup>
          <Select.Item value="high">
            <Select.ItemText>High</Select.ItemText>
            <span>Needs attention today</span>
            <Select.ItemIndicator />
          </Select.Item>
        </Select.Popup>
      </Select.Positioner>
    </Select.Portal>
  </Select.Root>
);
```

Tutte le parti che renderizzano elementi accettano attributi nativi, ref e le API di composizione `render`, `className` e `style` di Base UI. Ad esempio, usa `render={<Button />}` su `Trigger` per comporlo con un pulsante Twenty UI. Per un elemento di rendering diverso da un pulsante, imposta anche `nativeButton={false}`.

## Posizionamento

Imposta `size="sm"` o `size="md"` in `Trigger`. Il posizionamento appartiene a `Positioner`; la destinazione del portal appartiene a `Portal`.

`Positioner` mantiene le impostazioni predefinite di Base UI: `side="bottom"`, `align="center"`, `sideOffset={0}` e `alignItemWithTrigger={true}`. L'allineamento dell'elemento selezionato si applica all'input tramite puntatore quando lo spazio è sufficiente. Imposta `alignItemWithTrigger={false}` per utilizzare coerentemente il posizionamento ancorato. Gli esempi precedenti scelgono esplicitamente `align="start"` e `sideOffset={8}`.

```tsx theme={null}
import { useRef, useState } from 'react';
import { Button, Select } from 'twenty-ui/primitives/input';

const PRIORITIES = [
  { value: 'low', label: 'Low' },
  { value: 'normal', label: 'Normal' },
  { value: 'high', label: 'High' },
];

export const PositionedPrioritySelect = () => {
  const anchorRef = useRef<HTMLButtonElement>(null);
  const boundaryRef = useRef<HTMLDivElement>(null);
  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(
    null,
  );

  return (
    <div ref={boundaryRef}>
      <Button ref={anchorRef}>Position anchor</Button>
      <Select.Root defaultValue="normal" items={PRIORITIES}>
        <Select.Trigger aria-label="Priority">
          <Select.Value />
          <Select.Icon />
        </Select.Trigger>
        <Select.Portal container={portalContainer}>
          <Select.Positioner
            anchor={anchorRef}
            positionMethod="fixed"
            side="inline-end"
            align="start"
            alignItemWithTrigger={false}
            sideOffset={({ anchor }) => anchor.width / 4}
            alignOffset={4}
            collisionBoundary={boundaryRef.current ?? undefined}
            collisionPadding={12}
            collisionAvoidance={{ side: 'flip', align: 'shift' }}
            sticky
          >
            <Select.Popup>
              <Select.Arrow />
              <Select.List>
                {PRIORITIES.map(({ value, label }) => (
                  <Select.Item key={value} value={value}>
                    <Select.ItemText>{label}</Select.ItemText>
                    <Select.ItemIndicator />
                  </Select.Item>
                ))}
              </Select.List>
            </Select.Popup>
          </Select.Positioner>
        </Select.Portal>
      </Select.Root>
      <div ref={setPortalContainer} />
    </div>
  );
};
```

`Positioner` supporta anche ancore virtuali, funzioni di offset, `arrowPadding` e `disableAnchorTracking`. `Portal` utilizza il [contenitore del portal del tema](https://docs.twenty.com/it/ui/theming.md#scope-an-override), a meno che non fornisca `container`. Un valore esplicito `container={null}` attende finché quel contenitore non è disponibile.

**Light**

[Select con un'ancora personalizzata e un elenco scorrevole (light)](https://storybook.twenty.com/iframe.html?id=ui-input-select-portals--positioning-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Select con un'ancora personalizzata e un elenco scorrevole (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-select-portals--positioning-documentation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-select-portals--positioning-documentation)

## Moduli nativi e dettagli sui callback

Imposta `name` su `Root` per includere il valore selezionato in `FormData`. La selezione multipla invia una voce per ogni valore selezionato. `form` associa l'input nascosto a un modulo esterno e `inputRef` consente di accedere a quell'input. `required`, `disabled` e `autoComplete` mantengono il comportamento dei moduli nativi di Base UI.

`onValueChange` e `onOpenChange` ricevono lo stato successivo e i dettagli dell'evento a monte, inclusi `reason`, l'`event` nativo, `cancel()` e `allowPropagation()`. La chiamata a `cancel()` impedisce la corrispondente modifica dello stato interno. Le radici controllate richiedono comunque di aggiornare `value` o `open`.

```tsx theme={null}
import { useState } from 'react';
import { Select } from 'twenty-ui/primitives/input';

const PRIORITIES = [
  { value: 'normal', label: 'Normal' },
  { value: 'high', label: 'High' },
];

type PrioritySelectProps = { canSetHighPriority: boolean };

export const PrioritySelect = ({ canSetHighPriority }: PrioritySelectProps) => {
  const [priority, setPriority] = useState<string | null>('normal');

  return (
    <Select.Root
      items={PRIORITIES}
      value={priority}
      onValueChange={(nextPriority, details) => {
        if (nextPriority === 'high' && !canSetHighPriority) {
          details.cancel();
          return;
        }
        setPriority(nextPriority);
      }}
    >
      <Select.Trigger aria-label="Priority">
        <Select.Value />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner
          align="start"
          sideOffset={8}
          alignItemWithTrigger={false}
        >
          <Select.Popup>
            {PRIORITIES.map(({ value, label }) => (
              <Select.Item key={value} value={value}>
                <Select.ItemText>{label}</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            ))}
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  );
};
```

I tipi generici della radice rappresentano il valore dell'opzione e se la selezione multipla è abilitata. I valori oggetto supportano `itemToStringLabel`, `itemToStringValue` e `isItemEqualToValue`. Usa `null` per una selezione singola vuota e un array vuoto per una selezione multipla vuota.

## Tastiera

Gli utenti della tastiera possono aprire l'elenco dal trigger, navigare tra le opzioni con i tasti freccia e digitare per trovare un'opzione. Home e Fine passano rispettivamente alla prima e all'ultima opzione. Invio seleziona un'opzione; Esc chiude il popup e ripristina lo stato attivo del trigger. La selezione multipla mantiene aperto il popup mentre le opzioni vengono attivate o disattivate.

Etichetta il trigger con `Select.Label`, un nome accessibile o [Field](https://docs.twenty.com/it/ui/primitives/input/field.md). Un segnaposto da solo non assegna un nome al controllo.

## Props

Il riferimento è generato dai tipi dei componenti pubblici. Gli attributi nativi, inclusi i nomi accessibili e i gestori di eventi, sono accettati anche sulle parti che eseguono il rendering degli elementi.

### Select.Root

**Root.actionsRef** `RefObject\<SelectRootActions | null\>`

A ref to imperative actions.

* `unmount`: Ends the closing phase of the select after an externally controlled closing animation finishes.
  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the select completes closing on its own.
  Whether it leaves the DOM is decided by `keepMounted` on the portal.
* `close`: Closes the select imperatively when called.

**Root.autoComplete** `string`

Provides a hint to the browser for autofill.

**Root.children** `ReactNode`

Select parts sharing selection, open state and accessible relationships. Root renders no DOM node.

**Root.defaultOpen** `boolean` (default: false)

Whether the select popup is initially open.

To render a controlled select popup, use the `open` prop instead.

**Root.defaultValue** `SelectInputValue\<Value, Multiple\> | null`

The uncontrolled value of the select when it's initially rendered.

To render a controlled select, use the `value` prop instead.

**Root.disabled** `boolean` (default: false)

Whether the component should ignore user interaction.

**Root.form** `string`

Identifies the form that owns the hidden input.
Useful when the select is rendered outside the form.

**Root.highlightItemOnHover** `boolean` (default: true)

Whether moving the pointer over items should highlight them.
Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.

**Root.id** `string`

The id of the Select.

**Root.inputRef** `Ref\<HTMLInputElement\>`

Ref to the native hidden input used for form submission.

**Root.isItemEqualToValue** `((itemValue: Value, value: Value) =\> boolean)`

Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
Defaults to `Object.is` comparison.

**Root.items** `Record\<string, ReactNode\> | readonly \{ label: ReactNode; value: any; \}[] | readonly Group\<any\>[]`

Data structure of the items rendered in the select popup.
When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.

**Root.itemToStringLabel** `((itemValue: Value) =\> string)`

When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.

**Root.itemToStringValue** `((itemValue: Value) =\> string)`

When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.

**Root.modal** `boolean` (default: true)

Determines if the select enters a modal state when open.

* `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
* `false`: user interaction with the rest of the document is allowed.

On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

**Root.multiple** `boolean` (default: false)

Whether multiple items can be selected.

**Root.name** `string`

Identifies the field when a form is submitted.

**Root.onOpenChange** `((open: boolean, eventDetails: SelectRootOpenChangeEventDetails) =\> void)`

Receives the requested open state and unchanged Base UI event details.

**Root.onOpenChangeComplete** `((open: boolean) =\> void)`

Event handler called after any animations complete when the select popup is opened or closed.

**Root.onValueChange** `((value: SelectOutputValue\<Value, Multiple\> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) =\> void)`

Receives the requested generic value and unchanged Base UI event details, including reason, event and cancel(). Multiple selection receives an array; a cleared single value is null.

**Root.open** `boolean`

Whether the select popup is currently open.

**Root.readOnly** `boolean` (default: false)

Whether the user should be unable to choose a different option from the select popup.

**Root.required** `boolean` (default: false)

Whether the user must choose a value before submitting a form.

**Root.value** `SelectInputValue\<Value, Multiple\> | null`

The value of the select. Use when controlled.

### Select.Label

**Label.className** `string | ((state: FieldRootState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Label.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, FieldRootState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Label.style** `CSSProperties | ((state: FieldRootState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Trigger

**Trigger.children** `ReactNode`

Trigger content rendered as supplied. Compose Value and Icon explicitly.

**Trigger.className** `string | ((state: SelectTriggerState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Trigger.disabled** `boolean`

Whether the component should ignore user interaction.

**Trigger.nativeButton** `boolean` (default: true)

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`).

**Trigger.ref** `Ref\<HTMLButtonElement\>`

Ref to the rendered trigger element, a button by default.

**Trigger.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectTriggerState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Trigger.size** `"md" | "sm"` (default: md)

Visual size of the trigger. Defaults to md.

**Trigger.style** `CSSProperties | ((state: SelectTriggerState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Value

**Value.children** `ReactNode | ((value: any) =\> ReactNode)`

Accepts a function that returns a `ReactNode` to format the selected value.
Treat the value as read-only: in `multiple` mode it may be a shared frozen array
when nothing is selected.

**Value.className** `string | ((state: SelectValueState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Value.placeholder** `ReactNode`

The placeholder value to display when no value is selected.
This is overridden by `children` if specified, or by a null item's label in `items`.

**Value.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectValueState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Value.style** `CSSProperties | ((state: SelectValueState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Icon

**Icon.children** `ReactNode` (default: \<IconChevronDown />)

Trigger icon content. Defaults to the Twenty chevron; explicit children replace it.

**Icon.className** `string | ((state: SelectIconState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Icon.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectIconState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Icon.style** `CSSProperties | ((state: SelectIconState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Portal

**Portal.className** `string | ((state: SelectPortalState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Portal.container** `HTMLElement | ShadowRoot | RefObject\<HTMLElement | ShadowRoot | null\> | null`

Portal destination. Defaults to the current theme container, then the document body. Explicit null waits for a container before mounting.

**Portal.ref** `Ref\<HTMLDivElement\>`

Ref to the portal div. Native props and render apply to this element.

**Portal.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectPortalState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Portal.style** `CSSProperties | ((state: SelectPortalState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Backdrop

**Backdrop.className** `string | ((state: SelectBackdropState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Backdrop.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectBackdropState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Backdrop.style** `CSSProperties | ((state: SelectBackdropState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Positioner

**Positioner.align** `"center" | "end" | "start"` (default: center)

How to align the popup relative to the specified side.

**Positioner.alignItemWithTrigger** `boolean` (default: true)

Uses the upstream selected-item alignment by default. Set false to use side, align and offsets without overlapping the trigger.

**Positioner.alignOffset** `number | OffsetFunction` (default: 0)

Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:

* `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
* `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
* `data.side`: which side of the anchor element the positioner is aligned against.
* `data.align`: how the positioner is aligned relative to the specified side.

**Positioner.anchor** `Element | VirtualElement | RefObject\<Element | null\> | (() =\> Element | VirtualElement | null) | null`

An element to position the popup against.
By default, the popup will be positioned against the trigger.

**Positioner.arrowPadding** `number` (default: 5)

Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup.

**Positioner.className** `string | ((state: SelectPositionerState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Positioner.collisionAvoidance** `CollisionAvoidance`

Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):

* `'flip'`: keep the requested side when it fits; otherwise try the opposite side
  (`top` and `bottom`, or `left` and `right`).
* `'shift'`: never change side; keep the requested side and move the popup within
  the clipping boundary so it stays visible.
* `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):

* `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
* `'shift'`: keep side and requested alignment, then nudge the popup along the
  alignment axis to fit.
* `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:

* `'start'`: allow perpendicular fallback and try the logical start side first
  (`top` before `bottom`, or `left` before `right` in LTR).
* `'end'`: allow perpendicular fallback and try the logical end side first
  (`bottom` before `top`, or `right` before `left` in LTR).
* `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`.

**Positioner.collisionBoundary** `Boundary` (default: clipping-ancestors)

An element or a rectangle that delimits the area that the popup is confined to.

**Positioner.collisionPadding** `Padding` (default: 5)

Additional space to maintain from the edge of the collision boundary.

**Positioner.disableAnchorTracking** `boolean` (default: false)

Whether to disable the popup from tracking any layout shift of its positioning anchor.

**Positioner.positionMethod** `"absolute" | "fixed"` (default: absolute)

Determines which CSS `position` property to use.

**Positioner.ref** `Ref\<HTMLDivElement\>`

Ref to the positioning div. Native props, styles and render apply to this element.

**Positioner.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectPositionerState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Positioner.side** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"` (default: bottom)

Which side of the anchor element to align the popup against.
May automatically change to avoid collisions.

**Positioner.sideOffset** `number | OffsetFunction` (default: 0)

Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:

* `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
* `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
* `data.side`: which side of the anchor element the positioner is aligned against.
* `data.align`: how the positioner is aligned relative to the specified side.

**Positioner.sticky** `boolean` (default: false)

Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view.

**Positioner.style** `CSSProperties | ((state: SelectPositionerState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Popup

**Popup.children** `ReactNode`

Popup content rendered as supplied. Compose inside Positioner and choose Portal separately.

**Popup.className** `string | ((state: SelectPopupState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Popup.finalFocus** `boolean | RefObject\<HTMLElement | null\> | ((closeType: InteractionType) =\> boolean | void | HTMLElement | null)`

Determines the element to focus when the select popup is closed.

* `false`: Do not move focus.
* `true`: Move focus based on the default behavior (trigger or previously focused element).
* `RefObject`: Move focus to the ref element.
* `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
  Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.

**Popup.ref** `Ref\<HTMLDivElement\>`

Ref to the popup div. Native props, styles and render apply to this element.

**Popup.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectPopupState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Popup.style** `CSSProperties | ((state: SelectPopupState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.List

**List.className** `string | ((state: SelectListState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**List.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectListState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**List.style** `CSSProperties | ((state: SelectListState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Item

**Item.children** `ReactNode`

Option content rendered as supplied. Compose ItemText and an optional ItemIndicator explicitly.

**Item.className** `string | ((state: SelectItemState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Item.disabled** `boolean` (default: false)

Whether the component should ignore user interaction.

**Item.label** `string`

Specifies the text label to use when the item is matched during keyboard text navigation.

Defaults to the item text content if not provided.

**Item.nativeButton** `boolean` (default: false)

Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button.

**Item.ref** `Ref\<HTMLElement\>`

Ref to the rendered option element. Native props and render apply to this element.

**Item.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectItemState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Item.style** `CSSProperties | ((state: SelectItemState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

**Item.value** `any` (default: null)

A unique value that identifies this select item.

### Select.ItemIndicator

**ItemIndicator.children** `ReactNode` (default: \<IconCheck className=\{listItemStyles.checkIndicator} />)

Selected indicator content. Defaults to the Twenty check icon; explicit children replace it.

**ItemIndicator.className** `string | ((state: SelectItemIndicatorState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**ItemIndicator.keepMounted** `boolean`

Whether to keep the HTML element in the DOM when the item is not selected.

**ItemIndicator.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectItemIndicatorState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**ItemIndicator.style** `CSSProperties | ((state: SelectItemIndicatorState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.ItemText

**ItemText.className** `string | ((state: SelectItemTextState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**ItemText.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectItemTextState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**ItemText.style** `CSSProperties | ((state: SelectItemTextState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Arrow

**Arrow\.className** `string | ((state: SelectArrowState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Arrow\.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectArrowState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Arrow\.style** `CSSProperties | ((state: SelectArrowState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.ScrollDownArrow

**ScrollDownArrow\.className** `string | ((state: SelectScrollDownArrowState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**ScrollDownArrow\.keepMounted** `boolean` (default: false)

Whether to keep the HTML element in the DOM while the select popup is not scrollable.

**ScrollDownArrow\.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectScrollDownArrowState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**ScrollDownArrow\.style** `CSSProperties | ((state: SelectScrollDownArrowState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.ScrollUpArrow

**ScrollUpArrow\.className** `string | ((state: SelectScrollUpArrowState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**ScrollUpArrow\.keepMounted** `boolean` (default: false)

Whether to keep the HTML element in the DOM while the select popup is not scrollable.

**ScrollUpArrow\.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectScrollUpArrowState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**ScrollUpArrow\.style** `CSSProperties | ((state: SelectScrollUpArrowState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Group

**Group.className** `string | ((state: SelectGroupState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Group.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectGroupState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Group.style** `CSSProperties | ((state: SelectGroupState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.GroupLabel

**GroupLabel.className** `string | ((state: SelectGroupLabelState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**GroupLabel.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectGroupLabelState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**GroupLabel.style** `CSSProperties | ((state: SelectGroupLabelState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Select.Separator

**Separator.className** `string | ((state: SelectSeparatorState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Separator.orientation** `"horizontal" | "vertical"` (default: horizontal)

The orientation of the separator.

**Separator.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, SelectSeparatorState\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**Separator.style** `CSSProperties | ((state: SelectSeparatorState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.