Variable Combobox
Examples
Default Variable Combobox
Configured Variable Combobox
Importing
Properties
Events
Methods
Custom Properties
Parts

Variable Combobox

<terra-variable-combobox> | TerraVariableCombobox

Since 1.0

stable

Fuzzy-search for dataset variables in combobox with list autocomplete.

<terra-variable-combobox></terra-variable-combobox>

<script type="module">
  const element = document.querySelector('terra-variable-combobox')

  element.addEventListener('terra-combobox-change', (e) => {
    console.log(e)
  })
</script>

Examples

Default Variable Combobox

<terra-variable-combobox></terra-variable-combobox>

Configured Variable Combobox

<terra-variable-combobox placeholder="Search for Variables: e.g., albedo" hide-label hide-help></terra-variable-combobox>

[component-metadata:terra-variable-combobox]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/variable-combobox/variable-combobox.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/variable-combobox/variable-combobox.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/variable-combobox/variable-combobox.js';

To import this component as a React component:

import TerraVariableCombobox from '@nasa-terra/components/dist/react/variable-combobox';

Properties

Name	Description	Type	Default
`label`	Label the combobox with this.	`string`	`'Search for Variables'`
`placeholder`	Set a placeholder for the combobox with this. Defaults to the label’s value.	`string`	-
`hideHelp` `hide-help`	Hide the combobox’s help text. When hidden, not rendered at all.	`boolean`	`false`
`hideLabel` `hide-label`	Hide the combobox’s label text. When hidden, still presents to screen readers.	`boolean`	`false`
`useTags` `use-tags`	Determines if the variable combobox uses tags or plain text to display the query.	`boolean`	`false`
`value`	Represents the EntryID (_) of the selected variable. Other components (like the time-series graphing component) will use this.	`string`	-
`bearerToken` `bearer-token`	The token to be used for authentication with remote servers. The component provides the header “Authorization: Bearer” (the request header and authentication scheme). The property’s value will be inserted after “Bearer” (the authentication scheme).	`string`	-
`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
`terra-combobox-change`	`onTerraComboboxChange`	Emitted when an option is selected.	-

Learn more about events.

Methods

Name	Description	Arguments
`valueChanged()`	This component’s value is read by other components. Internally, the variable metdata has slight differences that require adapting.	`oldValue: string , newValue: string`

Learn more about methods.

Custom Properties

Name	Description	Default
`--host-height`	The height of the host element.
`--help-height`	The height of the search help element.
`--label-height`	The height of the input’s label element.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	A `search` element, the component’s base.
`combobox`	An `input` element used for searching.
`button`	A `button` used for toggling the listbox’s visibility.
`listbox`	A `ul` that holds the clickable options.

Learn more about customizing CSS parts.