Select

A styled native select replacement with a custom dropdown.

Category

Components expand_more

<div class="sel-wrap">
  <div class="sel-label">Select option</div>
  <div class="sel-trigger">
    Select...
    <span class="material-icons-round">expand_more</span>
  </div>
  <div class="sel-menu">
    <div class="sel-option">Option A</div>
    <div class="sel-option active">Option B</div>
    <div class="sel-option">Option C</div>
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

API Reference

Classes

Class	Description
`sel-wrap`	Column container
`sel-label`	Field label
`sel-trigger`	Dropdown button
`sel-menu`	Options list panel
`sel-option`	Individual option
`sel-option.active`	Currently selected option
`sel-dk`	Dark mode modifier

← Previous Scroll Area Next → Sheet