The ld-select
component represents a control that provides a menu of options. This control can be used in forms to accept a selection of these options from the user.
The feature set of the ld-select
Web Component differs from its CSS Component counterpart. While the first offers more display and input modes, the latter is a lightweight alternative, which only styles the native HTML select element.
body
element, or you have z-order related issues, you may need to configure the bodyElement
option using the tetherOptions
property. For more details check out the related troubleshooting section.
<ld-select placeholder="Pick a fruit" name="fruit">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<div class='ld-select'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<LdSelect placeholder="Pick a fruit" name="fruit">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
You can prevent a state with no options selected after initial selection in single select mode.
<ld-select placeholder="Pick a fruit" name="fruit" prevent-deselection>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<LdSelect placeholder="Pick a fruit" name="fruit" preventDeselection>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<ld-select placeholder="Pick some fruits" name="fruits" multiple>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<div class='ld-select'>
<select name="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
You may have noticed, that in multiple mode the component grows horizontally with the number of selected options. You can prevent this behaviour by either applying a width
or a max-width
style on the ld-select
element:
<ld-select placeholder="Pick some fruits" name="fruits" multiple style="width: 14rem">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya" selected>Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach" selected>Peach</ld-option>
<ld-option value="grape" selected>Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear" selected>Pear</ld-option>
<ld-option value="pineapple" selected>Pineapple</ld-option>
<ld-option value="plum" selected>Plum</ld-option>
</ld-select>
<ld-select class="my-select-max-width" placeholder="Pick some fruits" name="fruits" multiple style="max-width: 24rem">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya" selected>Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach" selected>Peach</ld-option>
<ld-option value="grape" selected>Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear" selected>Pear</ld-option>
<ld-option value="pineapple" selected>Pineapple</ld-option>
<ld-option value="plum" selected>Plum</ld-option>
</ld-select>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple style={ { width: '14rem' } }>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya" selected>Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry" selected>Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach" selected>Peach</LdOption>
<LdOption value="grape" selected>Grape</LdOption>
<LdOption value="fuyu persimmon" selected>Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear" selected>Pear</LdOption>
<LdOption value="pineapple" selected>Pineapple</LdOption>
<LdOption value="plum" selected>Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple style={ { maxWidth: '24rem' } }>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya" selected>Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry" selected>Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach" selected>Peach</LdOption>
<LdOption value="grape" selected>Grape</LdOption>
<LdOption value="fuyu persimmon" selected>Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear" selected>Pear</LdOption>
<LdOption value="pineapple" selected>Pineapple</LdOption>
<LdOption value="plum" selected>Plum</LdOption>
</LdSelect>
If you have limited vertical space (this may especially be the case on mobile devices), you can define a maximum of available rows of the select trigger element, which displays the current selection.
<ld-select placeholder="Pick some fruits" name="fruits" multiple max-rows="1" style="width: 14rem">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya" selected>Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach" selected>Peach</ld-option>
<ld-option value="grape" selected>Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear" selected>Pear</ld-option>
<ld-option value="pineapple" selected>Pineapple</ld-option>
<ld-option value="plum" selected>Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple max-rows="2" style="max-width: 24rem">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya" selected>Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach" selected>Peach</ld-option>
<ld-option value="grape" selected>Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear" selected>Pear</ld-option>
<ld-option value="pineapple" selected>Pineapple</ld-option>
<ld-option value="plum" selected>Plum</ld-option>
</ld-select>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple maxRows={1} style={ { width: '14rem' } }>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya" selected>Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry" selected>Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach" selected>Peach</LdOption>
<LdOption value="grape" selected>Grape</LdOption>
<LdOption value="fuyu persimmon" selected>Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear" selected>Pear</LdOption>
<LdOption value="pineapple" selected>Pineapple</LdOption>
<LdOption value="plum" selected>Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple maxRows={2} style={ { maxWidth: '24rem' } }>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya" selected>Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry" selected>Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach" selected>Peach</LdOption>
<LdOption value="grape" selected>Grape</LdOption>
<LdOption value="fuyu persimmon" selected>Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear" selected>Pear</LdOption>
<LdOption value="pineapple" selected>Pineapple</LdOption>
<LdOption value="plum" selected>Plum</LdOption>
</LdSelect>
<ld-select placeholder="Pick a fruit" name="fruit" disabled>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple disabled>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick a fruit" name="fruit" disabled>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple disabled>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<div class='ld-select'>
<select name="fruits" disabled>
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<LdSelect placeholder="Pick a fruit" name="fruit" disabled>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple disabled>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick a fruit" name="fruit" disabled>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple disabled>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry" selected>Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon" selected>Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
If you want the select to stay focusable even if it is disabled, use aria-disabled
in place of disabled
:
<ld-select placeholder="Pick a fruit" name="fruit" aria-disabled="true">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple aria-disabled="true">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick a fruit" name="fruit" aria-disabled="true">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple aria-disabled="true">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<div class='ld-select'>
<select name="fruits" aria-disabled="true">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<LdSelect placeholder="Pick a fruit" name="fruit" aria-disabled="true">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple aria-disabled="true">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick a fruit" name="fruit" aria-disabled="true">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple aria-disabled="true">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry" selected>Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon" selected>Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<ld-select placeholder="Pick a fruit" name="fruit" invalid>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple invalid>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<div class='ld-select ld-select--invalid'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<LdSelect placeholder="Pick a fruit" name="fruit" invalid>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple invalid>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana" selected>Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry" selected>Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon" selected>Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
In detached mode the component positions the popper element with a small vertical offset, effectively rendering a small gap between trigger button and popper element.
<ld-select placeholder="Pick a fruit" name="fruit" mode="detached">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<LdSelect placeholder="Pick a fruit" name="fruit" mode="detached">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
In inline mode, while the popper element has a minimum width, the component's trigger button width is defined by its content. Though you can still apply a width
or min-width
style on the trigger button, if you need to.
<ld-select placeholder="Pick a fruit" name="fruit" mode="inline">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple mode="inline">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple mode="inline" style="width: 6.9375rem" max-rows="1">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<LdSelect placeholder="Pick a fruit" name="fruit" mode="inline">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple mode="inline">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple mode="inline" style={ { width: '6.9375rem' } } maxRows={1}>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
In ghost mode the component works the same way as it does in inline mode while additionally rendering the background of the trigger button transparently. This mode is not combinable with the multiple select mode, because otherwise too many elements would potentially "loosely fly around" without any container establishing a connection between the elements.
<ld-select placeholder="Pick a fruit" name="fruit" mode="ghost">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<LdSelect placeholder="Pick a fruit" name="fruit" mode="ghost">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<ld-select placeholder="Pick a fruit" name="fruit" size="sm">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick a fruit" name="fruit">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick a fruit" name="fruit" size="lg">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple size="sm">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple>
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select placeholder="Pick some fruits" name="fruits" multiple size="lg">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<div class='ld-select ld-select--sm'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<div class='ld-select'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<div class='ld-select ld-select--lg'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg
role="presentation"
class="ld-select__icon"
viewBox="0 0 16 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M3 6l5 4 5-4"
/>
</svg>
</div>
<LdSelect placeholder="Pick a fruit" name="fruit" size="sm">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick a fruit" name="fruit">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick a fruit" name="fruit" size="lg">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple size="sm">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple>
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
<LdSelect placeholder="Pick some fruits" name="fruits" multiple size="lg">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
</LdSelect>
For both, the ld-select Web Component and the CSS Component, you can use a custom trigger button icon in place of the default caret. If you want to apply theme colors, with the icon reacting to pseudo classes such as :hover
, :active
and :focus
, use currentColor
on your icon.
<ld-select placeholder="Pick a fruit" name="fruit" size="sm">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
<ld-icon slot="icon" name="placeholder"></ld-icon>
</ld-select>
<ld-select placeholder="Pick a fruit" name="fruit">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
<ld-icon slot="icon" name="placeholder"></ld-icon>
</ld-select>
<ld-select placeholder="Pick a fruit" name="fruit" size="lg">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
<ld-icon slot="icon" name="placeholder"></ld-icon>
</ld-select>
<div class='ld-select ld-select--sm'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg class="ld-icon" role="presentation" viewBox="0 0 24 24" fill="none">
<rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
<circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
</svg>
</div>
<div class='ld-select'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg class="ld-icon" role="presentation" viewBox="0 0 24 24" fill="none">
<rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
<circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
</svg>
</div>
<div class='ld-select ld-select--lg'>
<select name="fruits">
<option value="">Pick a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="papaya">Papaya</option>
<option value="watermelon" disabled>Watermelon</option>
<option value="honeymelon">Honeymelon</option>
<option value="rasberry">Rasberry</option>
<option value="cherry">Cherry</option>
<option value="blueberry">Blueberry</option>
<option value="peach">Peach</option>
<option value="grape">Grape</option>
<option value="fuyu persimmon">Fuyu Persimmon</option>
<option value="monstera deliciosa">Monstera Deliciosa</option>
<option value="pear">Pear</option>
<option value="pineapple">Pineapple</option>
<option value="plum">Plum</option>
</select>
<svg class="ld-icon" role="presentation" viewBox="0 0 24 24" fill="none">
<rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
<circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
</svg>
</div>
<LdSelect placeholder="Pick a fruit" name="fruit" size="sm">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
<LdIcon slot="icon" name="placeholder" />
</LdSelect>
<LdSelect placeholder="Pick a fruit" name="fruit">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
<LdIcon slot="icon" name="placeholder" />
</LdSelect>
<LdSelect placeholder="Pick a fruit" name="fruit" size="lg">
<LdOption value="apple">Apple</LdOption>
<LdOption value="banana">Banana</LdOption>
<LdOption value="papaya">Papaya</LdOption>
<LdOption value="watermelon" disabled>Watermelon</LdOption>
<LdOption value="honeymelon">Honeymelon</LdOption>
<LdOption value="rasberry">Rasberry</LdOption>
<LdOption value="cherry">Cherry</LdOption>
<LdOption value="blueberry">Blueberry</LdOption>
<LdOption value="peach">Peach</LdOption>
<LdOption value="grape">Grape</LdOption>
<LdOption value="fuyu persimmon">Fuyu Persimmon</LdOption>
<LdOption value="monstera deliciosa">Monstera Deliciosa</LdOption>
<LdOption value="pear">Pear</LdOption>
<LdOption value="pineapple">Pineapple</LdOption>
<LdOption value="plum">Plum</LdOption>
<LdIcon slot="icon" name="placeholder" />
</LdSelect>
<ld-select filter placeholder="Pick a fruit" name="fruit">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana">Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry">Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon">Fuyu Persimmon</ld-option>
<ld-option value="monstera deliciosa">Monstera Deliciosa</ld-option>
<ld-option value="pear">Pear</ld-option>
<ld-option value="pineapple">Pineapple</ld-option>
<ld-option value="plum">Plum</ld-option>
</ld-select>
<ld-select filter placeholder="Pick some fruits" name="fruits" multiple max-rows="2" style="max-width: 17rem">
<ld-option value="apple">Apple</ld-option>
<ld-option value="banana" selected>Banana</ld-option>
<ld-option value="papaya">Papaya</ld-option>
<ld-option value="watermelon" disabled>Watermelon</ld-option>
<ld-option value="honeymelon">Honeymelon</ld-option>
<ld-option value="rasberry">Rasberry</ld-option>
<ld-option value="cherry" selected>Cherry</ld-option>
<ld-option value="blueberry">Blueberry</ld-option>
<ld-option value="peach">Peach</ld-option>
<ld-option value="grape">Grape</ld-option>
<ld-option value="fuyu persimmon" selected>Fuyu Persimmon</ld-option>
<ld-option value=