---
name: select
kind: component
lang: ts
domain: ui
version: "1.0.0"
purity: impure
signature: "Select<T>(props: SelectRootProps<T>): JSX.Element"
description: "Select genérico accesible con grupos, separadores y animaciones. Base-UI primitive con posicionamiento automático."
tags: [select, form, dropdown, component, ui, interactive]
uses_functions: [cn_ts_core]
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: ["@base-ui/react", lucide-react, react]
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/ui/select.tsx"
props:
  - name: value
    type: "T"
    required: false
    description: "Valor seleccionado (controlled)"
  - name: onValueChange
    type: "(value: T) => void"
    required: false
    description: "Callback al cambiar selección"
  - name: defaultValue
    type: "T"
    required: false
    description: "Valor inicial (uncontrolled)"
  - name: disabled
    type: "boolean"
    required: false
    description: "Deshabilitar el select"
emits: [onValueChange]
has_state: true
framework: react
variant: [default]
source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
source_license: "MIT"
source_file: "frontend/src/components/ui/select.tsx"
---

## Ejemplo

```tsx
<Select>
  <SelectTrigger><SelectValue placeholder="Elegir..." /></SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectGroupLabel>Frutas</SelectGroupLabel>
      <SelectItem value="apple">Manzana</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectItem value="other">Otro</SelectItem>
  </SelectContent>
</Select>
```

## Notas

Exporta 9 subcomponentes composables: Select, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator.
Genérico sobre el tipo de valor T — TypeScript infiere el tipo desde el prop value/defaultValue.
Depende de @base-ui/react y lucide-react.