# Select

> Elegir uno de una lista corta y cerrada, con el cuerpo de Input y la lista de DropdownMenu.

```tsx
import { Select, SelectContent, SelectGroup, SelectItem, … } from "sebs7n-ui/select"
```

## Ejemplos

### Básico

```tsx
import { Label } from "sebs7n-ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "sebs7n-ui/select"
import { useId } from "react"

function Basico() {
  const id = useId()
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor={id}>Condición frente al IVA</Label>
      <Select>
        <SelectTrigger id={id}>
          <SelectValue placeholder="Elegí una" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="ri">Responsable inscripto</SelectItem>
          <SelectItem value="mono">Monotributo</SelectItem>
          <SelectItem value="exento">Exento</SelectItem>
          <SelectItem value="cf">Consumidor final</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}
```

### Con grupos

```tsx
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "sebs7n-ui/select"

function Grupos() {
  return (
    <Select defaultValue="ars">
      <SelectTrigger aria-label="Moneda" className="max-w-xs">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Local</SelectLabel>
          <SelectItem value="ars">Peso argentino</SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Extranjera</SelectLabel>
          <SelectItem value="usd">Dólar</SelectItem>
          <SelectItem value="eur">Euro</SelectItem>
          <SelectItem value="brl">Real</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}
```

### Tamaños y error

Las mismas tres alturas que `Input`, para que un formulario mixto quede alineado.

```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "sebs7n-ui/select"

function TamanosYError() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Select>
        <SelectTrigger aria-label="Pequeño" size="sm">
          <SelectValue placeholder="sm · 32px" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="a">Una opción</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger aria-invalid aria-label="Con error">
          <SelectValue placeholder="Falta elegir" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="a">Una opción</SelectItem>
        </SelectContent>
      </Select>
      <Select disabled>
        <SelectTrigger aria-label="Deshabilitado">
          <SelectValue placeholder="No se puede cambiar" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="a">Una opción</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}
```

## Props

### Select

Hereda las props de `Select.Root`.

Sin props propias: pasa todo al primitivo.

### SelectContent

Hereda las props de `Select.Popup` y `Select.Positioner`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `align` | `"center" \| "start" \| "end"` | `"start"` | How to align the popup relative to the specified side. |
| `alignItemWithTrigger` | `boolean` | `false` | Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space. |
| `alignOffset` | `number \| OffsetFunction` | `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. |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"` | `"bottom"` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. |
| `sideOffset` | `number \| OffsetFunction` | `6` | 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. |
| `className` | `string` | — | — |

### SelectGroup

Hereda las props de `Select.Group`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SelectItem

Hereda las props de `Select.Item`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SelectLabel

Hereda las props de `Select.GroupLabel`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SelectSeparator

Hereda las props de `Select.Separator`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### SelectTrigger

Hereda las props de `Select.Trigger`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Mismas tres alturas que `Input`, para que un formulario mixto quede alineado. |
| `className` | `string` | — | — |

### SelectValue

Hereda las props de `Select.Value`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Enter · Espacio · ↓ | Abre la lista. |
| ↑ ↓ | Recorre las opciones. |
| Escribir | Salta a la opción que empieza con esas letras. |
| Enter | Elige y cierra. |
| Escape | Cierra y devuelve el foco al trigger. |

## Accesibilidad

- Base UI emite el patrón de listbox completo: `aria-expanded`, `aria-activedescendant` y el recorrido por flechas.
- `SelectValue` necesita `placeholder`; sin valor, el trigger queda con `data-placeholder` y el texto en `gray-700`.
- El error se marca con `aria-invalid` en el `SelectTrigger`, igual que en `Input`.
- El popup vive en un portal con `z-50` y devuelve el foco al trigger al cerrar.

## Reglas de uso

- **Hasta ~8 opciones fijas.** Más que eso, o si el usuario sabe lo que busca, `Combobox`.
- Para 2 o 3 opciones excluyentes que entran en pantalla, `RadioGroup` o `ToggleGroup`: se ven todas sin abrir nada.
- `alignItemWithTrigger` está en `false` a propósito: el popup se abre debajo, no encima del trigger.
- Agrupá con `SelectGroup` + `SelectLabel` cuando las opciones tienen categorías; no uses ítems deshabilitados como títulos.

## Relacionados

[combobox](/docs/components/combobox.md) · [dropdown-menu](/docs/components/dropdown-menu.md) · [radio-group](/docs/components/radio-group.md)