componente · @solu30/ui-kit/input

Select

El componente, montado

Cargando el espécimen…

Cargando el chunk del paquete instalado…

De dónde se importa

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

Props

17 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	opcional	`string`	Label for the select
value	sí	`T`	Currently selected value
options	sí	`SelectOption<T>[]`	Available options
onChange	sí	`(option: SelectOption<T>) => void`	Callback when selection changes
placeholder	opcional	`string`	Placeholder when nothing is selected
disabled	opcional	`boolean`	Whether the select is disabled
className	opcional	`string`	Additional CSS class
error	opcional	`string`	Error message to display
helpText	opcional	`string`	Help text to display below the select
fullWidth	opcional	`boolean`	Whether the select should take full width
clearable	opcional	`boolean`	Whether the select allows clearing the selection
onClear	opcional	`() => void`	Callback when selection is cleared
searchThreshold	opcional	`number`	Minimum options count to show the search input (default: 10)
searchPlaceholder	opcional	`string`	Placeholder for the search input
noResultsText	opcional	`string`	Text shown when no options match the search
ariaLabel	opcional	`string`	Accessible name when there is no visible `label`. A11y: `role="combobox"` does NOT take its name from content, so a Select without `label` and without this prop is announced as an unnamed combobox. Pass one whenever the field's purpose lives in surrounding layout (toolbar filters, inline table editors) instead of a visible label.
clearLabel	opcional	`string`	Accessible name for the clear (×) affordance. Only rendered when `clearable`.

Ejemplo del paquete

<Select
label="Status"
value={status}
options={[
{ id: 'active', name: 'Active' },
{ id: 'inactive', name: 'Inactive' }
]}
onChange={handleChange}
/>
<Select<number>
label="Category"
value={categoryId}
options={categories}
onChange={handleCategoryChange}
error="Must select a category"
clearable
/>

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.