• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Single select mode
    2. Multiple select mode
    3. Disabled
    4. Invalid
    5. Detached
    6. Inline
    7. Ghost
    8. Size
    9. With custom trigger button icon
    10. With filter
    11. With option groups
    12. With label
    13. With label and input message
    14. Input validation
  2. Properties
  3. Events
  4. Methods
    1. focusInner() => Promise<void>
  5. Slots
  6. Shadow Parts
  7. Dependencies
    1. Depends on
    2. Graph
Components Select
(external link)

ld-select #

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.

If your application is mounted to a different element than the 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.

Examples #

Single select mode #

<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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Prevent deselection #

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Multiple select mode #

<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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Width #

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Max rows #

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Disabled #

<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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum
When aria-disabled is applied on the Web Component, it will prevent user interaction. With the CSS Component version on the other hand, after applying aria-disabled on the select element, you will need to take care of preventing its default behaviour yourself.

Invalid #

<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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Detached #

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Inline #

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Ghost #

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

Size #

<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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

With custom trigger button icon #

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>
Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum Apple Banana Papaya Watermelon Honeymelon Rasberry Cherry Blueberry Peach Grape Fuyu Persimmon Monstera Deliciosa Pear Pineapple Plum

With filter #

<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=