Dropdown

Dropdown components are Input Fields that provide a searchable list of items. Users can either type in the input to filter the list or select an item directly from the interactive dropdown menu.

Programmatic

dropdown.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'dropdown_id',
      kind: 'input',
      type: 'dropdown',
      path: 'selection',
      label: 'Select an Item',
      props: {
        items: [
          {
            template: 'Apple',
            value: 'apple',
          },
          {
            template: 'Banana',
            value: 'banana',
          },
          {
            template: 'Cherry',
            value: 'cherry',
          },
        ],
        placeholder: 'Type to search...',
      },
    },
  ],
});

JSON

dropdown.json

{
  "form": [
    {
      "uid": "dropdown_id",
      "kind": "input",
      "type": "dropdown",
      "path": "selection",
      "label": "Select an Item",
      "props": {
        "items": [
          { "template": "Apple", "value": "apple" },
          { "template": "Banana", "value": "banana" },
          { "template": "Cherry", "value": "cherry" }
        ],
        "placeholder": "Type to search..."
      }
    }
  ]
}

Props

Use these props to customize your Dropdown component.

prop	type	description
items	array	Required. Array of items to be displayed in the dropdown list
placeholder	string	Text shown in the input when it is empty
hint	string	A description to display below the input
labelField	string	Field to use for the display label when items are objects
valueField	string	Field to use for the value when items are objects
searchFields	array	List of fields to search on when filtering the list
height	number	Height of the dropdown list container
itemHeight	number	Height of each individual item in the list
inputDebounce	number	Delay in milliseconds before triggering a search/filter
autocomplete	string	'on', 'off', or a space-separated list of W3C autofill tokens

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to provide instructions for the user.

Programmatic

dropdown.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'dropdown_hint',
      kind: 'input',
      type: 'dropdown',
      path: 'selection',
      label: 'Select an Item',
      props: {
        items: [
          {
            template: 'Apple',
            value: 'apple',
          },
          {
            template: 'Banana',
            value: 'banana',
          },
        ],
        hint: 'Start typing to filter the available items',
      },
    },
  ],
});

JSON

dropdown.json

{
  "form": [
    {
      "uid": "dropdown_hint",
      "kind": "input",
      "type": "dropdown",
      "path": "selection",
      "label": "Select an Item",
      "props": {
        "items": [
          { "template": "Apple", "value": "apple" },
          { "template": "Banana", "value": "banana" }
        ],
        "hint": "Start typing to filter the available items"
      }
    }
  ]
}

Custom Fields

If your items are complex objects, you can specify which fields to use for labels, values, and searching.

Programmatic

dropdown.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'dropdown_custom',
      kind: 'input',
      type: 'dropdown',
      path: 'selection',
      label: 'Custom Fields',
      props: {
        items: [
          {
            template: {
              name: 'USA',
              code: 'US',
            },
            value: 'us',
          },
          {
            template: {
              name: 'Canada',
              code: 'CA',
            },
            value: 'ca',
          },
        ],
        labelField: 'name',
        valueField: 'code',
        searchFields: ['name', 'code'],
      },
    },
  ],
});

JSON

dropdown.json

{
  "form": [
    {
      "uid": "dropdown_custom",
      "kind": "input",
      "type": "dropdown",
      "path": "selection",
      "label": "Custom Fields",
      "props": {
        "items": [
          { "template": { "name": "USA", "code": "US" }, "value": "us" },
          { "template": { "name": "Canada", "code": "CA" }, "value": "ca" }
        ],
        "labelField": "name",
        "valueField": "code",
        "searchFields": ["name", "code"]
      }
    }
  ]
}

Styling

Dropdowns can be styled as explained in the Styling Guide.

CSS Variables

Dropdowns leverage standard container and list variables.

CSS Variable	Description
--gui-radius-md	Border radius for the container
--gui-border-default	Default border color

Anatomy

This is the anatomy of the Dropdown Component in case you want to use your CSS styles.

dropdown-anatomy.html

<div class="gui-dropdown">
  <gui-label>
    <label for="dropdown_id">Select an Item</label>
    <div class="gui-label__hint">Type to search...</div>
  </gui-label>

  <div class="gui-widget">
    <input type="text" id="dropdown_id" placeholder="Type to search..." />

    <gui-list>
      <div class="gui-list__container">
        <div class="gui-list__item-wrapper" role="option" aria-selected="false">
          <div class="gui-list-item">Apple</div>
        </div>
        <div class="gui-list__item-wrapper" role="option" aria-selected="false">
          <div class="gui-list-item">Banana</div>
        </div>
      </div>
    </gui-list>
  </div>
</div>