select

Renders a <select> dropdown with automatic value re-population from submitted form data.

Usage

{% select name: 'field_name', options: array_variable, option_value: array_element_key, option_text: array_element_key, class: 'form-control' %}

Options

All standard HTML select attributes are supported, including data- attributes. Pass them as key/value pairs.

Option	Description
name	Field name. Used to auto-populate the selected value from submitted form data.
id	ID attribute.
class	CSS classes.
options	A Liquid array variable to use as the option list. Typically an array of measurement type objects when used in a submission form.
option_value	The key of each array item to use as the option value. Required when options contains objects. Typically id or value.
option_text	The key of each array item to use as the option label. Required when options contains objects. Typically name or label.
selected	The value to pre-select.
blank_option	Pass blank_option: true to prepend an empty <option value=""></option> at the top of the list.
required	Pass required: 'required' to mark the field as required.
data-*	Any data- attributes are supported, e.g. data-foo: 'bar'.

WARNING

Attributes without values are ignored — use required: 'required' rather than required alone.

Auto-population

When a name is set, the selected value is automatically restored from submitted form data after a failed submission. Array-style names (e.g. measurements[height]) are also supported.

Examples

Select from an array of objects, using specific properties for value and label:

{% select id: 'eye_color', name: 'eye_color_id', options: eye_colors, option_value: 'id', option_text: 'name', class: 'form-control', required: 'required' %}

Select from an array of objects with array-style name:

{% select id: 'height', name: 'measurements[height]', options: heights, option_value: 'value', option_text: 'label', class: 'form-control', required: 'required' %}

TIP

To identify what keys to use for option_value and option_text, inspect the array using the output filter:

{{ eye_colors | output }}