<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="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\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+|"
}
A basic select/option component for use on forms.
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.label
value will be usednosubmit
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