Select

Default

Default select dropdown option.

Select State
States
Select State NSW VIC QLD SA WA TAS NT ACT
This field is required

Code

<div class="simpui-form-group">
    <label for="state" class="simpui-label">State</label>
    <div class="simpui-dropdown-wrapper">
        <div class="simpui-select">
            <div class="simpui-select-trigger">
                <span class="simpui-selected-text">Select State</span>
                <svg class="simpui-chevron" width="16" height="16" viewBox="0 0 20 20" fill="none">
                    <path d="M6 8l4 4 4-4" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="simpui-options">
                <div class="simpui-options-title">States</div>
                <span data-value="">Select State</span>
                <span data-value="NSW">NSW</span>
                <span data-value="VIC">VIC</span>
                <span data-value="QLD">QLD</span>
                <span data-value="SA">SA</span>
                <span data-value="WA">WA</span>
                <span data-value="TAS">TAS</span>
                <span data-value="NT">NT</span>
                <span data-value="ACT">ACT</span>
            </div>
        </div>
        <input type="hidden" name="state" required/>
        <div class="simpui-error">This field is required</div>
    </div>
</div>

With Label

Dropdown select option with label.

Select State
States
Select State NSW VIC QLD SA WA TAS NT ACT
This field is required

Code

<div class="simpui-form-group">
    <div class="simpui-dropdown-wrapper">
        <div class="simpui-select">
            <div class="simpui-select-trigger">
                <span class="simpui-selected-text">Select State</span>
                <svg class="simpui-chevron" width="16" height="16" viewBox="0 0 20 20" fill="none">
                    <path d="M6 8l4 4 4-4" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="simpui-options">
                <div class="simpui-options-title">States</div>
                <span data-value="">Select State</span>
                <span data-value="NSW">NSW</span>
                <span data-value="VIC">VIC</span>
                <span data-value="QLD">QLD</span>
                <span data-value="SA">SA</span>
                <span data-value="WA">WA</span>
                <span data-value="TAS">TAS</span>
                <span data-value="NT">NT</span>
                <span data-value="ACT">ACT</span>
            </div>
        </div>
        <input type="hidden" name="state" required/>
        <div class="simpui-error">This field is required</div>
    </div>
</div>

Multi Select

Dropdown select with multiple option select functionality.

Select States
States
This field is required

Code

<div class="simpui-form-group">
    <div class="simpui-dropdown-wrapper">
        <div class="simpui-select multiselect">
            <div class="simpui-select-trigger">
                <span class="simpui-selected-text">Select States</span>
                <svg class="simpui-chevron" width="16" height="16" viewBox="0 0 20 20" fill="none">
                    <path d="M6 8l4 4 4-4" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="simpui-options">
                <div class="simpui-options-title">States</div>
                <label><input type="checkbox" value="NSW"> NSW</label>
                <label><input type="checkbox" value="VIC"> VIC</label>
                <label><input type="checkbox" value="QLD"> QLD</label>
                <label><input type="checkbox" value="SA"> SA</label>
                <label><input type="checkbox" value="WA"> WA</label>
                <label><input type="checkbox" value="TAS"> TAS</label>
                <label><input type="checkbox" value="NT"> NT</label>
                <label><input type="checkbox" value="ACT"> ACT</label>
            </div>
        </div>
        <input type="hidden" name="states" required>
        <div class="simpui-error">This field is required</div>
    </div>
</div>