Interactive Primitives

Copy Markdown

PUI is styled-first. Use the normal components for the PUI visual system and import a family's .Primitive module only when an application owns the markup and CSS for a hook-managed interaction.

import PUI.Select.Primitive

<.root id="assignee" class="relative" search_event="search_assignees">
  <.input id="assignee-input" name="assignee" />
  <.trigger id="assignee-trigger" listbox_id="assignee-listbox" class="my-trigger">
    Choose an assignee
  </.trigger>
  <.content id="assignee-listbox" trigger_id="assignee-trigger" class="my-menu">
    <.search id="assignee-search" listbox_id="assignee-listbox" />
    <.item value="ada" class="my-option data-[active=true]:bg-accent">Ada</.item>
  </.content>
</.root>

When search_event is present, the hook sends a debounced query to the owning LiveView. The handler should query its data source and assign the new options; clearing the query sends an empty query and keeps the selected value.

Primitive modules retain IDs, ARIA attributes, LiveView JS commands, and hook data contracts. They intentionally add no visual classes, icons, animation, or layout. Use plain semantic HTML for custom buttons, alerts, cards, tables, empty states, and native accordions.

Select arrow-key navigation records the current option as data-active="true" while focus remains on the listbox. Style that attribute on each item. Dropdown primitive items are buttons or links without layout classes, so add w-full when they should fill the menu and style aria-selected with the same surface used for hover.

Available primitive families are Dialog, Popover, Dropdown, Tooltip, Select, Tabs, DatePicker, Flash, and Layout.Sidebar.