Select
Default
Default select dropdown option.
Select State
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
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>
With Search
Dropdown select with search functionality.
Select State
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-search">
<div class="simpui-search-wrapper">
<svg class="simpui-search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M15.102 16.162a8 8 0 1 1 1.06-1.06l4.618 4.618a.75.75 0 1 1-1.06 1.06zM16.5 10a6.5 6.5 0 1 0-13 0a6.5 6.5 0 0 0 13 0"/></svg>
<input type="text" placeholder="Search..." class="simpui-options-input" />
</div>
</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
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>