Components
Toolbar
A row of controls composed from existing primitives and utility classes.
Toolbars are composed, not shipped: a flex container of button groups, toggle groups, selects, and inputs using utility classes (flex flex-row items-center gap-xs bg-card rounded-md shadow-sm p-xs). Groups divide with vertical Separators (<hr class="ui-separator" data-orientation="vertical">), and ml-auto pushes trailing controls to the end. There is no .ui-toolbar class or stylesheet.
Default
Loading components…
<div class="flex flex-row flex-wrap items-center gap-xs rounded-lg p-xs border" aria-label="Formatting options"> <ui-button-group role="group" aria-label="History"> <button class="ui-button" data-variant="outline" type="button">Undo</button> <button class="ui-button" data-variant="outline" type="button">Redo</button> </ui-button-group> <hr class="ui-separator mx-xs" data-orientation="vertical" aria-orientation="vertical" /> <ui-toggle-group role="group" aria-label="Text formatting"> <label class="ui-toggle" data-size="icon"> <input type="checkbox" name="format" value="bold" aria-label="Bold" checked /> <span class="font-strong" aria-hidden="true">B</span> </label> <label class="ui-toggle" data-size="icon"> <input type="checkbox" name="format" value="italic" aria-label="Italic" /> <span class="italic" aria-hidden="true">I</span> </label> <label class="ui-toggle" data-size="icon"> <input type="checkbox" name="format" value="underline" aria-label="Underline" /> <u aria-hidden="true">U</u> </label> </ui-toggle-group> <hr class="ui-separator mx-xs" data-orientation="vertical" aria-orientation="vertical" /> <select class="ui-select" aria-label="Paragraph style" style="--ui-select-inline-size: auto"> <button> <selectedcontent></selectedcontent> </button> <option value="paragraph" selected>Paragraph</option> <option value="heading">Heading</option> <option value="quote">Quote</option> </select> <input class="ui-input ml-auto" type="search" aria-label="Find in document" placeholder="Find" style="max-inline-size: 16ch" /></div>Accessibility
The container deliberately omits role="toolbar". That role requires a single tab stop with arrow-key roving focus between controls, which a static composition does not provide. Every control stays natively tabbable instead. Give the container an aria-label describing the group.