Manual UI Templates

Templates

elements man ui/templates

One page per template. A page opens with the import and an example, then the template's parts (the tags it exports and the classes it renders), its attributes with types and defaults, its slots, what each key does, and the data attributes its elements carry for styling and tests.

An attribute marked two-way can be bound to state. open={state.editing} controls a dialog from the page, and the dialog writes false back when it closes itself; written as a literal, open, the template owns the state. Every template takes class for extra classes on its root, and a template with a native element at its root takes attrs for any other attribute on it: id, name, title, aria-*, data-*.

The pages are grouped by category below. elements man -s <word> searches them.

Topics

ui/templates/button A button or a link that looks like one, in six variants and four sizes.ui/templates/button-group Related buttons, or an input and its buttons, joined into one control.ui/templates/input A native text input in the theme's control chrome, with a two-way value.ui/templates/input-group An Input or Textarea with icons, text and buttons inside one box.ui/templates/textarea A native multi-line input that grows with its content, between rows and maxRows.ui/templates/field A label, a control, a description and an error wired together, with native validation that never moves the layout.ui/templates/label A native label for a control, which dims when the control is disabled.ui/templates/native-select The browser's own select, styled as a control. Native pickers on phones, no script needed.ui/templates/checkbox A native checkbox drawn by the theme, with an indeterminate (mixed) state.ui/templates/radio-group One choice from a set: native radios sharing a name, with arrow-key movement.ui/templates/switch An on/off control that takes effect at once: a native checkbox with the switch role.ui/templates/toggle A button that is on or off, with aria-pressed.ui/templates/toggle-group A set of toggle buttons, one or many on, with one tab stop and arrow keys.ui/templates/slider Pick a value or a range by dragging thumbs along a track, with full keyboard support.ui/templates/number-input A number field with stepper buttons, keyboard steps, formatting, wheel and scrub.ui/templates/password-input A password field with a button that shows and hides what was typed.ui/templates/input-otp A one-time code in separate slots, with paste, SMS autofill and a pattern.ui/templates/tags-input Type a list of tags into one field: add, edit, delete and paste them from the keyboard.ui/templates/color-picker Pick a color with an area, channel sliders, inputs, swatches and the eye dropper.ui/templates/file-upload Drop, paste or browse for files; see them listed with previews, sizes, errors and progress.ui/templates/select Pick one value, or several, from a styled listbox that lines the selected option up over the trigger.ui/templates/combobox A text input that filters a list of options as you type, for one value or several shown as chips, with async results.ui/templates/dialog A modal window over the page that traps focus until it closes.ui/templates/alert-dialog A modal that interrupts with something important and waits for an answer.ui/templates/sheet A dialog that slides in from an edge of the screen, for content that complements the page.ui/templates/drawer A panel that slides from an edge and can be dragged away, with snap points and a scaled background.ui/templates/popover Rich content in a floating panel, opened by a trigger, that keeps the page usable.ui/templates/hover-card A preview of what a link points to, shown while the pointer rests on it.ui/templates/tooltip A short label for a control, shown on hover and keyboard focus.ui/templates/dropdown-menu A menu of actions from a button, with submenus, checkbox and radio items.ui/templates/context-menu A menu at the pointer on right-click or long-press.ui/templates/menubar A desktop-style bar of menus that stays open as you move across it.ui/templates/navigation-menu Site navigation with large animated dropdown panels.ui/templates/command A searchable, ranked list of actions run from the keyboard: inline, in a popover, or as a command palette.ui/templates/toast Short notices that stack at an edge of the screen, pause on hover and close on their own or with a swipe.ui/templates/badge A small label for a status, a count or a category, built on the pill.ui/templates/card A surface with a header, body and footer, built on the base card styles.ui/templates/alert A callout that draws attention to a message, with an icon, a title and an action.ui/templates/icon An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.ui/templates/kbd A keyboard key or shortcut, as text.ui/templates/separator A horizontal or vertical rule between content, semantic or decorative.ui/templates/skeleton A placeholder shape shown while content loads, or wrapped around the content so it never moves.ui/templates/spinner An indeterminate loading indicator, the same ring a loading Button draws.ui/templates/progress A bar showing how far a task has run, or that it is running.ui/templates/aspect-ratio Keeps media at a fixed width-to-height ratio, with its space held before it loads.ui/templates/avatar A user image with an initials fallback, a delayed fallback, a status badge and groups.ui/templates/empty The empty state for a list, a search or a page: media, a title, a line and what to do next.ui/templates/item A row with media, a title, a description and actions, alone or in a list.ui/templates/table A styled data table with caption, header, footer, alignment and row states.ui/templates/accordion A stack of headings that each show and hide a panel, one or several at a time.ui/templates/collapsible A trigger that shows and hides a region, with its height animated.ui/templates/tabs Layered panels, one shown at a time, chosen from a list of tabs.ui/templates/breadcrumb The path to the current page as a trail of links, composed from parts or built from a list.ui/templates/pagination Page numbers with previous and next, from a page count or composed from parts.ui/templates/tree A hierarchical list that opens with the arrow keys, selects one node or many, and loads children on demand.ui/templates/sidebar An app sidebar that collapses to icons or off the canvas and becomes a sheet on phones.ui/templates/resizable Panels separated by handles you drag or move with the arrow keys.ui/templates/carousel Slides you swipe, drag or step through, with momentum, snapping, loop and autoplay.ui/templates/scroll-area A scroll container with thin, themed scrollbars over native scrolling.ui/templates/calendar A month grid for picking one date, several dates or a range, with keyboard navigation across months.ui/templates/date-picker A button or text field that picks one date from a Calendar in a popover.ui/templates/date-range-picker A button that picks a start and end date from a two-month range Calendar in a popover.ui/templates/time-picker A time of day in the browser's own time field, styled as a control, with steps, limits and suggestions.ui/templates/data-table A data grid: sort, search, filter, resize, reorder, pin, group, select, edit, page or virtualize, save views and export.ui/templates/virtual-list A long list, or a grid of rows and columns, that renders only the items near the viewport, with measured row heights.ui/templates/chart What every chart shares: the config and its colors, the tooltip, the legend, the palette and the data table.ui/templates/chart-bar Vertical, horizontal, stacked and grouped bars with tooltip, legend and labels.ui/templates/chart-line Lines over categories with dots, curves, labels and a crosshair tooltip.ui/templates/chart-area Filled areas, stacked or expanded, solid or gradient, with a crosshair tooltip.ui/templates/chart-pie Pie and donut charts with labels, a center value, an active slice and stacked rings.ui/templates/chart-radar Values on radial axes, one polygon per series, over a polygon or circle grid.ui/templates/chart-radial Radial bars and gauges, with tracks, labels along the arc and a center value.ui/templates/kanban A board of columns of cards you reorder and move by pointer, touch or keyboard, with announcements and a one-column phone layout.ui/templates/message One chat message with avatar, author, time, streaming Markdown, attachments, actions and response branches.ui/templates/message-list A conversation that stays pinned to the newest message unless the reader scrolls up.ui/templates/prompt-input A growing message composer with attachments, tools, a model picker and a send button that stops a streaming reply.ui/templates/attachment A file or source as a thumbnail, chip or row, with preview, size, upload progress and remove.ui/templates/rich-text A rich text editor with a formatting toolbar, markdown shortcuts, links, task lists, a slash menu, find and replace and image upload. Installs separately.ui/templates/code-editor A code editor with highlighting, line numbers, folding, completion, search, multiple cursors and diagnostics. Installs separately.