Analytics & Reports
Analytics

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>