Forms: Selects - Launchpad

Native select

Role

Grouped options

<div class="lp-form-group">
    <label class="lp-form-group-label" for="sel-native">Role</label>
    <select id="sel-native" class="lp-select-native">
        <option value="">Choose a role…</option>
        <option value="admin">Administrator</option>
        <option value="editor">Editor</option>
        <option value="viewer">Viewer</option>
    </select>
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Grouped options</label>
    <select class="lp-select-native">
        <optgroup label="Frontend">
            <option value="js">JavaScript</option>
            <option value="ts">TypeScript</option>
            <option value="css">CSS</option>
        </optgroup>
        <optgroup label="Backend">
            <option value="php">PHP</option>
            <option value="go">Go</option>
            <option value="py">Python</option>
        </optgroup>
    </select>
</div>

Native sizes & states

Small

Large

Disabled

<div class="lp-form-group">
    <label class="lp-form-group-label">Small</label>
    <select class="lp-select-native lp-select-native--sm">
        <option>Small select</option>
    </select>
</div>
<div class="lp-form-group">
    <label class="lp-form-group-label">Large</label>
    <select class="lp-select-native lp-select-native--lg">
        <option>Large select</option>
    </select>
</div>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Disabled</label>
    <select class="lp-select-native" disabled>
        <option>Disabled select</option>
    </select>
</div>

Custom Select (single)

Adds a searchable dropdown with keyboard nav.

Country

Choose a country…

<p class="lp-text-sm lp-text-muted lp-mb-2">Adds a searchable dropdown with keyboard nav.</p>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Country</label>
    <div class="lp-select" data-lp-component="select">
        <div class="lp-select-trigger" role="button" aria-expanded="false" tabindex="0">
            <span class="lp-select-placeholder">Choose a country…</span>
        </div>
        <div class="lp-select-dropdown">
            <div class="lp-select-option" data-value="us">United States</div>
            <div class="lp-select-option" data-value="gb">United Kingdom</div>
            <div class="lp-select-option" data-value="de">Germany</div>
            <div class="lp-select-option" data-value="fr">France</div>
            <div class="lp-select-option" data-value="jp">Japan</div>
            <div class="lp-select-option" data-value="in">India</div>
        </div>
        <input type="hidden" name="country" />
    </div>
</div>

Custom Select (searchable)

Set data-lp-searchable="true" to enable live filtering.

Language

Search language…

<p class="lp-text-sm lp-text-muted lp-mb-2">Set <code>data-lp-searchable="true"</code> to enable live filtering.</p>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Language</label>
    <div class="lp-select" data-lp-component="select" data-lp-searchable="true">
        <div class="lp-select-trigger" role="button" aria-expanded="false" tabindex="0">
            <span class="lp-select-placeholder">Search language…</span>
        </div>
        <div class="lp-select-dropdown">
            <div class="lp-select-search"><input type="text" class="lp-input lp-input--sm" placeholder="Type to filter"></div>
            <div class="lp-select-option" data-value="en">English</div>
            <div class="lp-select-option" data-value="es">Spanish</div>
            <div class="lp-select-option" data-value="fr">French</div>
            <div class="lp-select-option" data-value="de">German</div>
            <div class="lp-select-option" data-value="ja">Japanese</div>
            <div class="lp-select-option" data-value="hi">Hindi</div>
            <div class="lp-select-option" data-value="zh">Chinese</div>
            <div class="lp-select-empty">No options found</div>
        </div>
        <input type="hidden" name="lang" />
    </div>
</div>

Custom Select (multiple)

Set data-lp-multiple="true" to allow multi-selection as tags.

Skills

Pick your skills…

<p class="lp-text-sm lp-text-muted lp-mb-2">Set <code>data-lp-multiple="true"</code> to allow multi-selection as tags.</p>
<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Skills</label>
    <div class="lp-select" data-lp-component="select" data-lp-multiple="true">
        <div class="lp-select-trigger" role="button" aria-expanded="false" tabindex="0">
            <div class="lp-select-tags"></div>
            <span class="lp-select-placeholder">Pick your skills…</span>
        </div>
        <div class="lp-select-dropdown">
            <div class="lp-select-option" data-value="html">HTML</div>
            <div class="lp-select-option" data-value="css">CSS</div>
            <div class="lp-select-option" data-value="js">JavaScript</div>
            <div class="lp-select-option" data-value="ts">TypeScript</div>
            <div class="lp-select-option" data-value="react">React</div>
            <div class="lp-select-option" data-value="vue">Vue</div>
            <div class="lp-select-option" data-value="svelte">Svelte</div>
        </div>
        <input type="hidden" name="skills" />
    </div>
</div>

Events

The custom Select emits three CustomEvents on the root element.

Event	Fires when	`event.detail`
`lp:select:open`	Dropdown opens	—
`lp:select:close`	Dropdown closes	—
`lp:select:change`	Selection changes	`{ value }`