Select

Provides several options from a defined drop-down list. For quick reference, see technical parameters.

Best practices

  • Use in forms only.
  • Write clear and concise questions.
  • To select more than one option, use a Checkbox instead.

Example


                    [Select options="Value 1|{Value 2}|Value 3" name="select" hint="---" required="true" separator="|"]Select Component[/Select]
                
<div class="bocss-select__group">
    <label class="bocss-label" id="bocss-select-2-label" for="bocss-select-2">Select Component *</label>
    <div>
        <select name="select" id="bocss-select-2" class="bocss-select">
                <option class="bocss-hint" value="" selected
                    disabled>---</option>
                <option value="Value 1" 
                    >Value 1</option>
                <option value="Value 2" 
                    disabled>Value 2</option>
                <option value="Value 3" 
                    >Value 3</option>
        </select>
        <i class="arrow downward"></i>
    </div>
    
</div>

Parameters

Parameter Values Description
hint user‑specified Set the unselected text of the first option.
id user‑specified HTML id of the field
label user‑specified Label of the field. The content enclosed within the shortcode tags populates this field.
name user‑specified HTML name of the field
options user‑specified Defines the options. Use commas to separate. An option enclosed in curly brackets indicates a disabled option.
required true, false Set to “true” to make the field mandatory.
selected_option user‑specified Sets which option should be selected as the default, e.g. selected_option=’2’.
separator user‑specified When commas are part of the content, use a special character to separate the options.