Select

<gstock-select> | GstockSelect

API

Properties

Name	Description	Type	Default
`value`	The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the value attribute will be a space-delimited list of values based on the options selected, and the value property will be an array. For this reason, values must not contain spaces.	`-`	`-`
`defaultValue` `value`	The default value of the form control. Primarily used for resetting the form control.	`string \| string[]`	`''`
`clearable`	Adds a clear button when the select is not empty.	`boolean`	`false`
`disabled`	Disables the select control.	`boolean`	`false`
`helpText` `help-text`	The select’s help text. If you need to display HTML, use the `help-text` slot instead.	`string`	`''`
`hoist`	Enable this option to prevent the listbox from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	`boolean`	`false`
`prefix`	The prefix icon name.	`string`	`''`
`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`	`''`
`label`	The select’s label. If you need to display HTML, use the `label` slot instead.	`string`	`''`
`maxOptionsVisible` `max-options-visible`	The maximum number of selected options to show when `multiple` is true. After the maximum, ”+n” will be shown to indicate the number of additional items that are selected. Set to 0 to remove the limit.	`number`	`3`
`multiple`	Allows more than one option to be selected.	`boolean`	`false`
`name`	The name of the select, submitted as a name/value pair with form data.	`string`	`''`
`open`	Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can use the `show()` and `hide()` methods and this attribute will reflect the select’s open state.	`boolean`	`false`
`placeholder`	Placeholder text to show as a hint when the select is empty.	`string`	`''`
`placement`	The preferred placement of the select’s menu. Note that the actual placement may vary as needed to keep the listbox inside of the viewport.	`'top' \| 'bottom'`	`'bottom'`
`readonly`	Makes the input readonly.	`boolean`	`false`
`required`	The select’s required attribute.	`boolean`	`false`
`size`	The size of the select.	`'small' \| 'medium' \| 'large'`	`'medium'`
`suffix`	The suffix icon name.	`string`	`''`
`validityStyles` `validity-styles`	Specify whether validation styles are applied.	`false`	`-`
`getChip`	A function that customizes the chips to be rendered when multiple=true. The first argument is the option, the second is the current chip’s index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.	`( option: GstockOption, index: number, ) => TemplateResult \| string \| HTMLElement`	`-`
`validity`	Gets the validity state object	`-`	`-`
`validationMessage`	Gets the validation message	`-`	`-`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties .

Events

Name	React Event	Description	Event Detail
`gstock-change-event`	`onGstockChangeEvent`	Emitted when the control’s value changes.	-
`gstock-clear-event`	`onGstockClearEvent`	Emitted when the control’s value is cleared.	-
`gstock-input-event`	`onGstockInputEvent`	Emitted when the control receives input.	-
`gstock-focus-event`	`onGstockFocusEvent`	Emitted when the control gains focus.	-
`gstock-blur-event`	`onGstockBlurEvent`	Emitted when the control loses focus.	-
`gstock-show-event`	`onGstockShowEvent`	Emitted when the select’s menu opens.	-
`gstock-after-show-event`	`onGstockAfterShowEvent`	Emitted after the select’s menu opens and all animations are complete.	-
`gstock-hide-event`	`onGstockHideEvent`	Emitted when the select’s menu closes.	-
`gstock-after-hide-event`	`onGstockAfterHideEvent`	Emitted after the select’s menu closes and all animations are complete.	-
`gstock-invalid-event`	`onGstockInvalidEvent`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Learn more about events .

Slots

Name	Description
`default`	The listbox options. Must be `<gstock-option>` elements. You can use `<gstock-divider>` to group items visually.
`label`	The input’s label. Alternatively, you can use the `label` attribute.
`prefix`	Used to prepend a presentational icon or similar element to the combobox.
`suffix`	Used to append a presentational icon or similar element to the combobox.
`clear-icon`	An icon to use in lieu of the default clear icon.
`expand-icon`	The icon to show when the control is expanded and collapsed. Rotates on open and close.
`help-text`	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Learn more about slots .

Methods

Name	Description
`show( )`	Shows the listbox.
`hide( )`	Hides the listbox.
`checkValidity( )`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
`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.
`focus( options: FocusOptions )`	Sets focus on the control.
`blur( )`	Removes focus from the control.

Learn more about methods .

CSS Parts

Name	Description
`form-control`	The form control that wraps the label, input, and help text.
`form-control-label`	The label’s wrapper.
`form-control-input`	The select’s wrapper.
`form-control-help-text`	The help text’s wrapper.
`combobox`	The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
`prefix`	The container that wraps the prefix slot.
`suffix`	The container that wraps the suffix slot.
`display-input`	The element that displays the selected option’s label, an `<input>` element.
`listbox`	The listbox container where options are slotted.
`chips`	The container that houses option chips when `multiselect` is used.
`chip`	The individual chips that represent each multiselect option.
`chip__base`	The chip’s base part.
`chip__content`	The chip’s content part.
`chip__remove-button`	The chip’s remove button.
`chip__remove-button__base`	The chip’s remove button base part.
`clear-button`	The clear button.
`expand-icon`	The container that wraps the expand icon.

Learn more about CSS parts .

Dependencies

This component automatically imports the following dependencies.