Zazz Design Framework
Components

Select

Native select control styled using the customizable select API and anchor positioning.

.ui-select styles native <select> controls using appearance: base-select. Falls back to the standard OS dropdown where unsupported.

Requires a <button><selectedcontent></selectedcontent></button> as the first child of the <select> to serve as the trigger and mirror selection.

Default

Loading components…

Placement

Use data-side and data-align on .ui-select to position the dropdown panel relative to the trigger button:

Sides

Loading components…

Alignment

Loading components…

Multiple

appearance: base-select does not cover <select multiple> in any stable engine yet, so <ui-multiselect> progressively enhances a multi-select element into the same dropdown styling. The select is hidden but remains the form value carrier, while a stamped trigger and popover of checkbox rows (with the shared option checkmark) sync values both ways. The trigger displays First selection (+N more). Without JavaScript, the native multi listbox renders and remains fully functional.

Loading components…

API

AttributeTargetValues
data-side.ui-selecttop, bottom, left, right
data-align.ui-selectstart, center, end
data-placeholderui-multiselectTrigger text when nothing is selected
data-label-moreui-multiselectOverflow template, default (+{n} more)
data-side / data-alignui-multiselectForwarded to the stamped panel

Textarea

Multi-line text inputs with auto-growth and shared form field tokens.

Autocomplete

An input that suggests options as you type, ranked by match quality.

On this page

DefaultPlacementSidesAlignmentMultipleAPI