componente · @solu30/ui-kit/input

SelectRoot

Root component that manages select state. Provides context to all child select components.

167 sitios de import en 6 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
elliot
gestorsalon
raquetea

El componente, montado

Cargando el espécimen…

export function SelectCompositionMatrix() {
  const [flavor, setFlavor] = useState('dulce-de-leche')

  return (
    <Stage label="SelectRoot · composición, agrupada, sin prop de error" tall wide>
      <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
        <SelectRoot value={flavor} onValueChange={setFlavor}>
          <SelectTrigger>
            <SelectValue placeholder="Elegí un sabor" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Clásicos</SelectLabel>
              <SelectItem value="dulce-de-leche">Dulce de leche</SelectItem>
              <SelectItem value="chocolate">Chocolate amargo</SelectItem>
            </SelectGroup>
            <SelectSeparator />
            <SelectGroup>
              <SelectLabel>De estación</SelectLabel>
              <SelectItem value="frutilla">Frutilla</SelectItem>
              <SelectItem value="mango" disabled>
                Mango (sin stock)
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </SelectRoot>
        <SelectRoot value="" onValueChange={() => {}} disabled>
          <SelectTrigger>
            <SelectValue placeholder="Franquicia cerrada temporalmente" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="a">—</SelectItem>
          </SelectContent>
        </SelectRoot>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · SelectCompositionMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import {
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectRoot,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from '@solu30/ui-kit/input'

Anatomía

Las partes que componen SelectRoot se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

SelectRoot
├── SelectContent
├── SelectGroup
├── SelectItem
├── SelectLabel
├── SelectSeparator
├── SelectTrigger
└── SelectValue

Props

5 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`string`	Currently selected value
onValueChange	sí	`(value: string) => void`	Callback when selection changes
children	sí	`ReactNode`	Child components
disabled	opcional	`boolean`	Deja el control inerte: el disparador va con `disabled` nativo (no recibe foco ni click) y el panel no puede abrirse. Se propaga por contexto al SelectTrigger. Un `disabled` propio en el SelectTrigger también sirve, y gana si cualquiera de los dos es verdadero.
className	opcional	`string`	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.

Ejemplo del paquete

// Controlado siempre: `value` y `onValueChange` son REQUERIDAS.
<SelectRoot value={salon} onValueChange={setSalon}>
  <SelectTrigger><SelectValue placeholder="Elegí un salón" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="norte">Norte</SelectItem>
    <SelectItem value="sur" disabled>Sur (en obra)</SelectItem>
  </SelectContent>
</SelectRoot>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.