componente · @solu30/ui-kit/input

MultiSelect

Selector de varias opciones con chips en el disparador, búsqueda y acciones de elegir todo y limpiar.

Seguir leyendo — 2 párrafos más

Multi-select component with chips display, search, and dropdown filtering. Uses CSS variables for theming: --ui-bg-raised, --ui-accent, --ui-border, --ui-content-primary, --ui-error.

Opt-in features (no cambian el render por default):

summaryAfter: colapsa las chips del trigger a un resumen ("N selected") pasado ese umbral.
showSelectAll: header en el panel con contador + acciones "Select all" (sobre las opciones filtradas) / "Clear".
SelectOption.group: agrupa las opciones bajo headers cuando alguna opción filtrada trae group.

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

cmp-packages
gestorsalon
luigi
raquetea

El componente, montado

Cargando el espécimen…

export function ComboTagMatrix() {
  const [crew, setCrew] = useState('')
  const [toppings, setToppings] = useState<string[]>(['dulce-de-leche'])
  const [allergens, setAllergens] = useState<string[]>(['gluten', 'frutos secos'])

  return (
    <Stage label="Combobox, MultiSelect y TagInput · ninguno tiene error" tall wide>
      <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
        <Combobox
          label="Tripulación de guardia"
          options={CREW_OPTIONS}
          value={crew}
          onChange={setCrew}
          onCreate={(name) => setCrew(name)}
          placeholder="Buscar o agregar..."
        />
        <Combobox
          label="Proveedor de catering"
          options={CREW_OPTIONS}
          value=""
          onChange={() => {}}
          error="No hay proveedores habilitados para esta fecha"
        />
        <MultiSelect
          label="Toppings incluidos"
          options={TOPPING_OPTIONS}
          value={toppings}
          onChange={setToppings}
          showSelectAll
          summaryAfter={3}
        />
        <div className="flex flex-col gap-1.5">
          <TagInput
            label="Alérgenos declarados"
            value={allergens}
            onChange={setAllergens}
            placeholder="Agregar alérgeno..."
          />
          <span className="text-xs text-content/50">
            TagInput no tiene error: una lista mal cargada no se puede marcar en rojo — KIT-023.
          </span>
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · ComboTagMatrix: 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 { MultiSelect } from '@solu30/ui-kit/input'

Props

18 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
options	sí	`SelectOption[]`	Available options
value	sí	`string[]`	Array of selected option IDs
onChange	sí	`(selectedIds: string[]) => void`	Callback when selections change
placeholder	opcional	`string`	Placeholder text when nothing is selected
label	opcional	`string`	Label for the field
error	opcional	`string`	Error message to display
renderOption	opcional	`(option: SelectOption) => React__default.ReactNode`	Custom option renderer
renderSelected	opcional	`(option: SelectOption) => React__default.ReactNode`	Custom selected chip renderer
className	opcional	`string`	Additional CSS classes for the container
optionsContainerClassName	opcional	`string`	Additional CSS classes for the dropdown
disabled	opcional	`boolean`	Whether the component is disabled
searchPlaceholder	opcional	`string`	Placeholder for the search input
noResultsText	opcional	`string`	Text shown when no options match
summaryAfter	opcional	`number`	Colapsa las chips del trigger a un único resumen cuando value.length > summaryAfter. Default: sin colapso (comportamiento actual).
summaryLabel	opcional	`(count: number) => string`	Texto del resumen del trigger (y del contador del header si showSelectAll). Default: (n) => `${n} selected`
showSelectAll	opcional	`boolean`	Muestra un header de acciones en el panel: contador + "Elegir todo (filtradas)" + "Limpiar". Default: false.
selectAllLabel	opcional	`string`	Label de la acción seleccionar-todo. Default: "Select all"
clearLabel	opcional	`string`	Label de la acción limpiar. Default: "Clear"

Ejemplo del paquete

<MultiSelect
  label="Tags"
  options={[
    { id: 'react', name: 'React' },
    { id: 'vue', name: 'Vue' },
  ]}
  value={selectedTags}
  onChange={setSelectedTags}
  placeholder="Select tags..."
/>

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.