UI.BlueStack.io - Component Library

Basic Select - Simple and Accessible

Choose an option

This is a helper text for the select

<div class="space-y-4">
                
                <label class="select-label" for="basic-select">Choose an option</label>
                <div class="select-wrapper max-w-xs">
                    <select id="basic-select">
                        <option value="" disabled selected>Select…</option>
                        <option value="1">Option One</option>
                        <option value="2">Option Two</option>
                        <option value="3">Option Three</option>
                        <option value="4">Option Four</option>
                    </select>
                    <svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <p class="select-helper">This is a helper text for the select</p>
            </div>

Select with Label and Required Field

Country *

Please select your country of residence

<div class="space-y-4">
                <label class="select-label max-w-xs">
                    Country <span class="required">*</span>
                </label>
                <div class="select-wrapper max-w-xs">
                    <select required>
                        <option value="" disabled selected>Select country...</option>
                        <option value="us">United States</option>
                        <option value="uk">United Kingdom</option>
                        <option value="ca">Canada</option>
                        <option value="au">Australia</option>
                    </select>
                    <svg class="chevron" viewBox="0 0 24 24">
                        <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <p class="select-helper">Please select your country of residence</p>
            </div>

Select Sizes - Five Standard Sizes

Tiny (28px)

Small (32px)

Default (40px)

Large (48px)

Big (56px)

<div class="space-y-4">
                
                <div>
                    <label class="select-label text-xs">Tiny (28px)</label>
                    <div class="select-wrapper tiny max-w-xs">
                        <select>
                            <option value="" disabled selected>Tiny select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

                
                <div>
                    <label class="select-label text-sm">Small (32px)</label>
                    <div class="select-wrapper small max-w-xs">
                        <select>
                            <option value="" disabled selected>Small select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

                
                <div>
                    <label class="select-label">Default (40px)</label>
                    <div class="select-wrapper max-w-xs">
                        <select>
                            <option value="" disabled selected>Default select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

                
                <div>
                    <label class="select-label text-base">Large (48px)</label>
                    <div class="select-wrapper large max-w-xs">
                        <select>
                            <option value="" disabled selected>Large select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

                
                <div>
                    <label class="select-label text-lg">Big (56px)</label>
                    <div class="select-wrapper big max-w-xs">
                        <select>
                            <option value="" disabled selected>Big select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>
            </div>

<div class="space-y-4">
                
                <div>
                    <label class="select-label text-xs">Tiny (28px)</label>
                    <div class="select-wrapper tiny max-w-xs">
                        <select>
                            <option value="" disabled selected>Tiny select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

<div>
                    <label class="select-label text-sm">Small (32px)</label>
                    <div class="select-wrapper small max-w-xs">
                        <select>
                            <option value="" disabled selected>Small select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

<div>
                    <label class="select-label">Default (40px)</label>
                    <div class="select-wrapper max-w-xs">
                        <select>
                            <option value="" disabled selected>Default select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

<div>
                    <label class="select-label text-base">Large (48px)</label>
                    <div class="select-wrapper large max-w-xs">
                        <select>
                            <option value="" disabled selected>Large select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>

<div>
                    <label class="select-label text-lg">Big (56px)</label>
                    <div class="select-wrapper big max-w-xs">
                        <select>
                            <option value="" disabled selected>Big select...</option>
                            <option value="xs">Extra Small</option>
                            <option value="s">Small</option>
                            <option value="m">Medium</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>
            </div>

Select States - Visual Feedback

Error State

This field is required

Success State

Valid selection

Warning State

Please review

Disabled State

Field is disabled

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <div>
                    <label class="select-label">Error State</label>
                    <div class="select-wrapper error max-w-xs">
                        <select>
                            <option value="" disabled selected>Select…</option>
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">This field is required</p>
                </div>

                
                <div>
                    <label class="select-label">Success State</label>
                    <div class="select-wrapper success max-w-xs">
                        <select>
                            <option value="">Select…</option>
                            <option value="1" selected>Successfully Selected</option>
                            <option value="2">Option 2</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">Valid selection</p>
                </div>

                
                <div>
                    <label class="select-label">Warning State</label>
                    <div class="select-wrapper warning max-w-xs">
                        <select>
                            <option value="" disabled selected>Please reconsider...</option>
                            <option value="1">Safe Option</option>
                            <option value="2">Risky Option</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">Please review</p>
                </div>

                
                <div>
                    <label class="select-label">Disabled State</label>
                    <div class="select-wrapper max-w-xs">
                        <select disabled>
                            <option value="" disabled selected>Disabled Select</option>
                            <option value="1">Option 1</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">Field is disabled</p>
                </div>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <div>
                    <label class="select-label">Error State</label>
                    <div class="select-wrapper error max-w-xs">
                        <select>
                            <option value="" disabled selected>Select…</option>
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">This field is required</p>
                </div>

<div>
                    <label class="select-label">Success State</label>
                    <div class="select-wrapper success max-w-xs">
                        <select>
                            <option value="">Select…</option>
                            <option value="1" selected>Successfully Selected</option>
                            <option value="2">Option 2</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">Valid selection</p>
                </div>

<div>
                    <label class="select-label">Warning State</label>
                    <div class="select-wrapper warning max-w-xs">
                        <select>
                            <option value="" disabled selected>Please reconsider...</option>
                            <option value="1">Safe Option</option>
                            <option value="2">Risky Option</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">Please review</p>
                </div>

<div>
                    <label class="select-label">Disabled State</label>
                    <div class="select-wrapper max-w-xs">
                        <select disabled>
                            <option value="" disabled selected>Disabled Select</option>
                            <option value="1">Option 1</option>
                        </select>
                        <svg class="chevron" viewBox="0 0 24 24">
                            <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <p class="select-helper">Field is disabled</p>
                </div>
            </div>

Grouped Options - Organized Categories

Select a Country

<div class="space-y-4">
                <label class="select-label">Select a Country</label>
                <div class="select-wrapper max-w-xs">
                    <select>
                        <option value="" disabled selected>Select country…</option>
                        <optgroup label="North America">
                            <option value="us">United States</option>
                            <option value="ca">Canada</option>
                            <option value="mx">Mexico</option>
                        </optgroup>
                        <optgroup label="Europe">
                            <option value="uk">United Kingdom</option>
                            <option value="de">Germany</option>
                            <option value="fr">France</option>
                            <option value="es">Spain</option>
                        </optgroup>
                        <optgroup label="Asia">
                            <option value="jp">Japan</option>
                            <option value="cn">China</option>
                            <option value="in">India</option>
                        </optgroup>
                    </select>
                    <svg class="chevron" viewBox="0 0 24 24">
                        <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>

<div class="space-y-4">
                <label class="select-label">Select a Country</label>
                <div class="select-wrapper max-w-xs">
                    <select>
                        <option value="" disabled selected>Select country…</option>
                        <optgroup label="North America">
                            <option value="us">United States</option>
                            <option value="ca">Canada</option>
                            <option value="mx">Mexico</option>
                        </optgroup>
                        <optgroup label="Europe">
                            <option value="uk">United Kingdom</option>
                            <option value="de">Germany</option>
                            <option value="fr">France</option>
                            <option value="es">Spain</option>
                        </optgroup>
                        <optgroup label="Asia">
                            <option value="jp">Japan</option>
                            <option value="cn">China</option>
                            <option value="in">India</option>
                        </optgroup>
                    </select>
                    <svg class="chevron" viewBox="0 0 24 24">
                        <path d="M7 10l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>

Multiple Selection - Select Multiple Options

Select Technologies

Hold Ctrl/Cmd to select multiple options

<div class="space-y-4">
                <label class="select-label">Select Technologies</label>
                <div class="select-wrapper max-w-xs">
                    <select multiple size="5">
                        <option value="js">JavaScript</option>
                        <option value="ts">TypeScript</option>
                        <option value="react">React</option>
                        <option value="vue">Vue</option>
                        <option value="angular">Angular</option>
                        <option value="svelte">Svelte</option>
                    </select>
                </div>
                <p class="select-helper">Hold Ctrl/Cmd to select multiple options</p>
            </div>

select Component