600 West

Select: Companysize 

<label>
        <span>
            Company Size
            
        </span>
    <div class="Form-select">
        <select
            id="companySize"
            name="CompanySize"
            class=""
            style=""
             required
        >
                    <option value="" disabled selected>Select One</option>
                    <option value="agency" >We’re an agency</option>
                    <option value="myself" >Myself only</option>
                    <option value="2-10" >2-10 employees</option>
                    <option value="11-50" >11-50 employees</option>
                    <option value="51-200" >51-200 employees</option>
                    <option value="201-500" >201-500 employees</option>
                    <option value="501-1,000" >501-1,000 employees</option>
                    <option value="1,001-5,000" >1,001-5,000 employees</option>
                    <option value="5,001-10,000" >5,001-10,000 employees</option>
                    <option value="10,001+" >10,001+ employees</option>
        </select>
    </div>
    </label>
 
{{#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": "Company Size",
  "id": "companySize",
  "name": "CompanySize",
  "helptext": null,
  "required": true,
  "options": "Select One|nosubmit|disabled selected\nWe’re an agency|agency|\nMyself only|myself|\n2-10 employees|2-10|\n11-50 employees|11-50|\n51-200 employees|51-200|\n201-500 employees|201-500|\n501-1,000 employees|501-1,000|\n1,001-5,000 employees|1,001-5,000|\n5,001-10,000 employees|5,001-10,000|\n10,001+ employees|10,001+|"
}

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