Forms

Select

Option list with full keyboard support, a status tone per option and a change event.

data-u="select"

Example

<div data-u="select" data-u-props='{
  "options": ["All products", "Base plan", "Pro plan", "Team plan"],
  "label": "Product"
}'></div>
<div data-u="select" data-u-props='{
  "options": [
    {"l": "Pending", "tone": "warn"},
    {"l": "Done", "tone": "ok"},
    {"l": "Processing", "tone": "info"}
  ],
  "value": "Done",
  "label": "Status"
}'></div>

Installation

Select ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

They go in data-u-props, as JSON.

Prop	Type	Default	What it does
`options`	array	`[]`	Strings or `{v, l, tone}` objects. v is the value, l the text, tone paints a dot: ok, warn, err, info or accent.
`value`	string	first option	Value that opens selected. Compared with v (or with the text, when the option is a string).
`label`	string	no default	Name of the button and the list (`aria-label`).

Classes and variants

Class	What it does
`u-select--sm`	On the host: compact version, used inside tables.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
button	`aria-haspopup="listbox"`, `aria-expanded`	Says it opens a list and whether it's open.
button	`aria-controls`, `aria-activedescendant`	Tie the button to the list and to the active option while open.
list and options	`role="listbox"`, `role="option"`, `aria-selected`	The chosen option has `aria-selected="true"`.

Keyboard

Key	Does
Enter, Space or arrows	open the list
Up and down arrows	move through the options
Home and End	first and last option
Letter	jumps to the next option that starts with it
Enter or Space	pick and close
Esc	closes and returns focus to the button
Tab	closes and moves on

Events and API

Event	detail	When
`u:change`	`{ value, label, index }`	When an option other than the current one is picked.

Every event bubbles up the page. Listen on the element itself: el.addEventListener("u:change", (e) => e.detail).

el._u.value reads the value, el._u.set(v) changes it without firing an event, el._u.close() closes it.