Select
A container for a menu of selectable options.
Example
const options = [
{ label: 'first one', value: 'first', selected: true },
{ label: 'second one', value: 'second', selected: false },
{ label: 'third one', value: 'third', selected: false }
];
<gb-select options="{ options }"></gb-select>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
options |
Option[] | [] |
An array of objects containing Option attributes. |
optionAlias |
string | 'option' |
The name of the alias exposed for descendant gb-select-option tags. |
indexAlias |
string | 'i' |
The name of the alias exposed for indices of descendant gb-select-option tags. |
onSelect() |
function | The event handler to call when an option is selected. |
State
This component does not have any properties in state.
Events
This component does not listen for any events.
Child Components: Custom Select
A flexible custom-styled selectable option menu.
Provided Aliases: $customSelect
Example
<gb-custom-select></gb-custom-select>
Properties
| Property | Type | Default | Required | Notes |
|---|---|---|---|---|
hover |
boolean | false |
Yes | true when this component is on hover, false otherwise. |
State
| Property | Type | Notes |
|---|---|---|
selected |
function | Returns the selected option. |
onSelect |
function | The event handler called when an option is selected. event: _MouseEvent & { item: { i: number } }_ - event generated when an option is selected |
Events
This component does not listen for any events.
Child Components: Native Select
A wrapper around the native HTML select element.
- This component does not have any properties.
- This component does not have any properties in state.
- This component does not listen for any events.
Example
<gb-native-select></gb-native-select>