← →

Select

Select is a native web component (zero dependencies) that styles the browser's native <select> element while keeping its reliability and accessibility. The options are passed as <option> children in the light DOM and re-emitted internally. Use it whenever you need a single-selection field in forms, with an optional label and helper text.

Preview

<pura-select label="State" hint="Select your state of residence" value="sp">
  <option value="sp">Sao Paulo</option>
  <option value="rj">Rio de Janeiro</option>
  <option value="mg">Minas Gerais</option>
  <option value="rs">Rio Grande do Sul</option>
  <option value="ba">Bahia</option>
</pura-select>

Attributes

Attribute	Type	Default	Description
`label`	string	—	Label text shown above the select.
`hint`	string	—	Helper text shown below the select.
`value`	string	—	Selected value; also reflected as a property and updated on change.
`disabled`	boolean	false	Disables the select when present.
`invalid`	boolean	false	Applies an error style and aria-invalid when present.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/select.js"></script>

JavaScript

import "./pura/lib/select.js";

Slots

default

Events

change