Input Select
Dropdown select inputs for choosing from predefined options.
Basic Select
HTML
<div style="max-width: 300px">
<label
for="select-demo-1"
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Country
</label>
<select
id="select-demo-1"
class="ss-c-select"
>
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
<option value="fr">France</option>
<option value="jp">Japan</option>
</select>
</div>Select Sizes
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 16px;
max-width: 300px;
"
>
<!-- Small -->
<div>
<label
for="select-demo-2"
style="display: block; margin-bottom: 6px; font-size: 12px"
>
Small
</label>
<select
id="select-demo-2"
class="ss-c-select ss-c-select--small"
>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<!-- Medium -->
<div>
<label
for="select-demo-3"
style="display: block; margin-bottom: 6px; font-size: 14px"
>
Medium
</label>
<select
id="select-demo-3"
class="ss-c-select"
>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<!-- Large -->
<div>
<label
for="select-demo-4"
style="display: block; margin-bottom: 6px; font-size: 15px"
>
Large
</label>
<select
id="select-demo-4"
class="ss-c-select ss-c-select--large"
>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>Select with Option Groups
HTML
<div style="max-width: 300px">
<label
for="select-demo-5"
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Programming Language
</label>
<select
id="select-demo-5"
class="ss-c-select"
>
<option value="">Choose a language</option>
<optgroup label="Frontend">
<option value="js">JavaScript</option>
<option value="ts">TypeScript</option>
<option value="html">HTML/CSS</option>
</optgroup>
<optgroup label="Backend">
<option value="python">Python</option>
<option value="java">Java</option>
<option value="go">Go</option>
<option value="rust">Rust</option>
</optgroup>
<optgroup label="Mobile">
<option value="swift">Swift</option>
<option value="kotlin">Kotlin</option>
</optgroup>
</select>
</div>Select States
This field is required
✓ Selection confirmed
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 16px;
max-width: 300px;
"
>
<!-- Disabled -->
<div>
<label
for="select-demo-6"
style="display: block; margin-bottom: 6px; opacity: 0.5"
>
Disabled
</label>
<select
id="select-demo-6"
class="ss-c-select disabled"
disabled
>
<option>Disabled option</option>
</select>
</div>
<!-- Error -->
<div>
<label for="select-demo-7" style="display: block; margin-bottom: 6px">Error</label>
<select
id="select-demo-7"
class="ss-c-select ss-c-error"
>
<option value="">Please select an option</option>
</select>
<span
style="
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--ss-color-error);
"
>
This field is required
</span>
</div>
<!-- Success -->
<div>
<label for="select-demo-8" style="display: block; margin-bottom: 6px">
Success
</label>
<select
id="select-demo-8"
class="ss-c-select ss-c-success"
>
<option value="valid">Valid selection</option>
</select>
<span
style="
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--ss-color-success);
"
>
✓ Selection confirmed
</span>
</div>
</div>Multiple Select
Hold Ctrl/Cmd to select multiple
HTML
<div style="max-width: 300px">
<label
for="select-demo-9"
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Select Skills (multiple)
</label>
<select
id="select-demo-9"
class="ss-c-select ss-c-select--multiple"
multiple
size="5"
>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="node">Node.js</option>
</select>
<span
style="
display: block;
margin-top: 6px;
font-size: 12px;
opacity: 0.7;
"
>
Hold Ctrl/Cmd to select multiple
</span>
</div>Select with Icon
HTML
<div style="max-width: 300px">
<label
for="select-demo-10"
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Sort By
</label>
<div style="position: relative">
<span
aria-hidden="true"
style="
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
"
>
▼
</span>
<select
id="select-demo-10"
class="ss-c-select"
style="padding-left: 36px"
>
<option value="newest">Newest First</option>
<option value="oldest">Oldest First</option>
<option value="az">A to Z</option>
<option value="za">Z to A</option>
<option value="popular">Most Popular</option>
</select>
</div>
</div>