600 West

Select: Default 

<div class="Form-select">
    <select id="" name="" class="" style="">
        </select>
</div>
 
{{#if label}}
    <label>
        <span>
            {{{label}}}
            {{#if helptext}}<span class="help-text"> {{{helptext}}}</span>{{/if}}
        </span>
{{/if}}
    <div class="Form-select">
        <select
            id="{{id}}"
            name="{{name}}"
            class="{{modifier}}"
            style="{{style}}"
            {{#if required}} required{{/if}}
        >
            {{#if options}}
                {{#each (createoptions options)}}
                    <option value="{{value}}" {{#if attribute}}{{attribute}}{{/if}}>{{label}}</option>
                {{/each}}
            {{/if}}
        </select>
    </div>
{{#if label}}
    </label>
{{/if}}
 
{
  "label": null,
  "id": null,
  "name": null,
  "helptext": null,
  "required": null,
  "options": null
}

Select

A basic select/option component for use on forms.

Options Property

The options property takes a pipe and line-delimited string that is parsed into the various options. Each line is an option and each option takes the following properties as pipe-delimited strings:

  • label (required) - The user-facing text to show in the option.
  • value (optional) - The value sent via the form.
    • If left empty, the label value will be used
    • If nosubmit the value will be empty (helpful if you need to prevent submission of a field that is disabled and selected)
  • attributes (optional) - A string of space-separated attributes to append to the option. Example: disabled selected.

Examples:

<label>|<value>|<attributes> //==> all properties explicitly set
<label>||<attributes> //==> label is used for label and value
<label>|nosubmit|<attributes> //==> option fails validation if field is required