SelectRoot

El componente, montado

Cargando el chunk del paquete instalado…

De dónde se importa

import { SelectRoot } from '@solu30/ui-kit/input'

Props

Ejemplo del paquete

<SelectRoot value={value} onValueChange={setValue}>
<SelectTrigger>
<SelectValue placeholder="Choose an option..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</SelectContent>
</SelectRoot>
<SelectRoot value={value} onValueChange={setValue}>
<SelectTrigger>
<SelectValue placeholder="Choose..." />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Vegetables</SelectLabel>
<SelectItem value="carrot">Carrot</SelectItem>
</SelectGroup>
</SelectContent>
</SelectRoot>
/
/**
Props for SelectRoot
/
interface SelectRootProps {
/** Currently selected value */
value: string;
/** Callback when selection changes */
onValueChange: (value: string) => void;
/** Child components */
children: ReactNode;
/** Whether the select is disabled */
disabled?: boolean;
/**
Se mergea sobre el wrapper (`cn("relative w-full", className)`). El
default mantiene `w-full` por compatibilidad — pasá `w-auto`/`w-max` en
toolbars horizontales (flex-wrap) para que el select tome su ancho
natural en vez de forzar su propia línea.
/
className?: string;
}
/**
Root component that manages select state.
Provides context to all child select components.

Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.