Select

Select components are Input Fields that allow users to pick a single item from a predefined list of options. They use the native HTML <select> element to provide familiar interaction patterns, especially on mobile devices.

select.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'select',
      path: 'country',
      label: 'Country',
      props: {
        options: [
          {
            label: 'United States',
            value: 'us',
          },
          {
            label: 'Canada',
            value: 'ca',
          },
          {
            label: 'Mexico',
            value: 'mx',
          },
        ],
      },
    },
  ],
});

select.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "select",
      "path": "country",
      "label": "Country",
      "props": {
        "options": [
          { "label": "United States", "value": "us" },
          { "label": "Canada", "value": "ca" },
          { "label": "Mexico", "value": "mx" }
        ]
      }
    }
  ]
}

Props

Use these props to customize your Select component.

prop	type	description
options	array	Required. Array of objects representing the dropdown choices
placeholder	string	Text shown when no option is selected. Defaults to “Select an option”
hint	string	A description to display below the select dropdown
icon	string	Custom icon class to display inside the select box (e.g. fas fa-globe)
labelField	string	Which object key to use as the display label for an option. Defaults to label
valueField	string	Which object key to use as the underlying value for an option. Defaults to value
autocomplete	string	'on', 'off', or a space-separated list of W3C autofill tokens

Placeholder

Use the property placeholder to define the default empty-state text.

select.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'select',
      path: 'country',
      label: 'Country',
      props: {
        placeholder: 'Select your country',
        options: [
          {
            label: 'United States',
            value: 'us',
          },
          {
            label: 'Canada',
            value: 'ca',
          },
        ],
      },
    },
  ],
});

select.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "select",
      "path": "country",
      "label": "Country",
      "props": {
        "placeholder": "Select your country",
        "options": [
          { "label": "United States", "value": "us" },
          { "label": "Canada", "value": "ca" }
        ]
      }
    }
  ]
}

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add descriptive text or validation instructions.

select.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'select',
      path: 'country',
      label: 'Country',
      props: {
        hint: 'Please select your current country of residence.',
        options: [
          {
            label: 'United States',
            value: 'us',
          },
        ],
      },
    },
  ],
});

select.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "select",
      "path": "country",
      "label": "Country",
      "props": {
        "hint": "Please select your current country of residence.",
        "options": [
          { "label": "United States", "value": "us" }
        ]
      }
    }
  ]
}

Icon

Use the property icon to add a visual indicator inside the select input, on the left side.

select.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'select',
      path: 'country',
      label: 'Country',
      props: {
        icon: 'fas fa-globe',
        options: [
          {
            label: 'United States',
            value: 'us',
          },
        ],
      },
    },
  ],
});

select.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "select",
      "path": "country",
      "label": "Country",
      "props": {
        "icon": "fas fa-globe",
        "options": [
          { "label": "United States", "value": "us" }
        ]
      }
    }
  ]
}

Custom Option Fields

If your data source uses different keys for the label and value (e.g., name and code), use labelField and valueField to map them accordingly.

select.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'select',
      path: 'country',
      label: 'Country',
      props: {
        labelField: 'name',
        valueField: 'code',
        options: [
          {
            name: 'United States',
            code: 'us',
          },
          {
            name: 'Canada',
            code: 'ca',
          },
        ],
      },
    },
  ],
});

select.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "select",
      "path": "country",
      "label": "Country",
      "props": {
        "labelField": "name",
        "valueField": "code",
        "options": [
          { "name": "United States", "code": "us" },
          { "name": "Canada", "code": "ca" }
        ]
      }
    }
  ]
}

Styling

Select components can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-text-default	Dropdown arrow indicator color
--gui-space-gap--inner	Label gap
--gui-intent-error	Border and focus shadow color when invalid

Anatomy

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

select-anatomy.html

<gui-select>
  <label for="fieldUid">
    Label
    <div class="gui-select__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-widget">
    <select
      id="fieldUid"
      class="gui-select-input gui-select--icon"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    >
      <option value="" disabled selected>
        Select an option
      </option>
      <option value="us">United States</option>
      <option value="ca">Canada</option>
    </select>
    <span class="gui-widget-icon fas fa-globe"></span>
  </div>
</gui-select>