componente · @solu30/ui-kit/input

Combobox

El componente, montado

Cargando el espécimen…

Cargando el chunk del paquete instalado…

De dónde se importa

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

Props

15 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
options	sí	`ComboboxOption[]`	Available options.
value	opcional	`string`	Currently selected value (matches `ComboboxOption.value`).
onChange	sí	`(value: string) => void`	Callback when an existing option is selected.
onCreate	opcional	`(label: string) => void \| Promise<void>`	When provided, enables creatable mode: if the typed text has no exact (case-insensitive) match among `options`, a "Crear «texto»" row appears at the end of the list and calls this with the trimmed typed label.
placeholder	opcional	`string`	Placeholder shown on the closed trigger when nothing is selected.
searchPlaceholder	opcional	`string`	Placeholder for the search input inside the popup.
createLabel	opcional	`string`	Label prefix for the create row. Default: "Crear".
label	opcional	`string`	Label above the trigger.
error	opcional	`string`	Error message — renders below the trigger and marks it invalid.
disabled	opcional	`boolean`	Disables the trigger entirely.
loading	opcional	`boolean`	Shows a spinner on the trigger and disables interaction (e.g. while `onCreate` is in flight upstream).
clearable	opcional	`boolean`	Shows a clear ("x") affordance when a value is selected.
onClear	opcional	`() => void`	Called when the clear affordance is activated.
noResultsText	opcional	`string`	Text shown when there are no matches and creation isn't available/eligible.
className	opcional	`string`	Extra classes on the root wrapper.

Ejemplo del paquete

<Combobox
label="Puesto"
options={puestos.map((p) => ({ value: p.id, label: p.nombre }))}
value={puestoId}
onChange={setPuestoId}
onCreate={async (nombre) => {
const created = await createPuesto({ nombre })
setPuestoId(created.id)
}}
placeholder="Seleccionar puesto..."
searchPlaceholder="Buscar puesto..."
/>

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.