Bolt Design System

Select

Select inputs are for choosing a single option from a list.

Important Notes:

Add select options as an array to the form-select.twig include statement.

Rememeber to set type as an option and add label and value attributes to each of the options.

Select elements do not have placeholder text, to create one, use an <option> element with empty value, then use the option label as the placeholder text (eg. “- Select an option -”).

Demo

Select

Twig

{% set label %}
  {% include '@bolt-components-form/form-label.twig' with {
    title: 'Select',
    displayType: 'floating',
  } only %}
{% endset %}
{% set select %}
  {% include '@bolt-components-form/form-select.twig' with {
    options: [
      {
        type: 'option',
        value: '',
        label: '- Select an option -'
      },
      {
        type: 'option',
        value: 'option-a',
        label: 'Option A'
      },
      {
        type: 'option',
        value: 'option-b',
        label: 'Option B'
      }
    ]
  } only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
  label: label,
  children: select,
} only %}

HTML

Not available in plain HTML. Please use Twig.