componente · @solu30/ui-kit/input
MultiSelect
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
import { MultiSelect } from '@solu30/ui-kit/input'Props
| 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. 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.