List Picker

<gstock-list-picker> | GstockListPicker

API

Propiedades

Nombre	Descripción	Tipo	Por defecto
`defaultValue`	The default value of the form control. Primarily used for resetting the form control.	`string \| string[]`	`''`
`async`	Enables async mode for loading data from a server.	`boolean`	`false`
`debounceDelay` `debounce-delay`	The debounce delay in milliseconds for search operations (only applies to async mode).	`number`	`300`
`disabled`	Disables the component.	`boolean`	`false`
`form`	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`string`	`''`
`helpText` `help-text`	The list picker’s help text. If you need to display HTML, use the `help-text` slot instead.	`string`	`''`
`itemHeight` `item-height`	Height of each item in pixels (required for virtual scrolling).	`number`	`40`
`items`	The list of items to display.	`GstockListPickerItem[]`	`[]`
`label`	The list picker’s label. If you need to display HTML, use the `label` slot instead.	`string`	`''`
`loading`	Shows a loading spinner.	`boolean`	`false`
`maxChipsVisible` `max-chips-visible`	Maximum number of chips to show in the footer before collapsing.	`number`	`3`
`multiple`	Enables multiple selection mode.	`boolean`	`false`
`name`	The name of the component for form submission.	`string`	`''`
`placeholder`	Placeholder text for the search input.	`string`	`''`
`required`	Makes the list picker a required field.	`boolean`	`false`
`search`	The search query.	`string`	`''`
`showSelectAll` `show-select-all`	Shows the select all checkbox in multiple mode.	`boolean`	`true`
`size`	The size of the component, determining its height.	`'small' \| 'medium' \| 'large'`	`'medium'`
`value`	The selected value(s). Can be a string (single) or array of strings (multiple).	`string \| string[]`	`[]`
`validity`	Gets the validity state object	`-`	`-`
`validationMessage`	Gets the validation message	`-`	`-`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Aprende más sobre atributos y propiedades .

Eventos

Nombre	React Event	Descripción	Event Detail
`gstock-change-event`	`onGstockChangeEvent`	Emitted when an individual item selection changes.	-
`gstock-select-all-event`	`onGstockSelectAllEvent`	Emitted when the select all checkbox is toggled.	-
`gstock-search-event`	`onGstockSearchEvent`	Emitted when the search input changes (for async data loading).	-
`gstock-clear-event`	`onGstockClearEvent`	Emitted when the selection is cleared.	-
`gstock-invalid-event`	`onGstockInvalidEvent`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Aprende más sobre eventos .

Slots

Nombre	Descripción
`label`	The list picker’s label. Alternatively, you can use the `label` attribute.
`help-text`	Text that describes how to use the list picker. Alternatively, you can use the `help-text` attribute.

Aprende más sobre slots .

Métodos

Nombre	Descripción
`checkValidity( )`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
`clearSelection( )`	Clears the current selection.
`focus( options: FocusOptions )`	Sets focus on the control.
`getForm( )`	Gets the associated form, if one exists.
`reportValidity( )`	Checks for validity and shows the browser’s validation message if the control is invalid.
`setCustomValidity( message: string )`	Sets a custom validation message. Pass an empty string to restore validity.

Aprende más sobre métodos .

Propiedades personalizadas

Nombre	Descripción	Default
`--height`	The height of the list body. Defaults to `fit-content` (adapts to content).

Aprende más sobre propiedades personalizadas .

Partes

Nombre	Descripción
`form-control`	The form control that wraps the label, list picker, and help text.
`form-control-label`	The label’s wrapper.
`form-control-input`	The list picker’s wrapper.
`form-control-help-text`	The help text’s wrapper.
`base`	The component’s base wrapper.
`header`	The header container with search input.
`search`	The search input wrapper.
`select-all`	The select all checkbox wrapper.
`body`	The scrollable list container.
`list`	The items list wrapper.
`item`	Individual list item wrapper.
`item-control`	The radio/checkbox control.
`item-label`	The item label text.
`footer`	The footer container with summary.
`summary`	The selection summary text.
`chips`	The chips container for selected items.
`chip`	Individual chip for selected item.
`loading`	The loading spinner container.
`empty`	The empty state container.

Aprende más sobre partes CSS .

Dependencias

Este componente importa automáticamente las siguientes dependencias.