Components
105 components
Every component, by what it is for. Each page has live examples, the markup behind them and the API read from the source.
105 components
Form 30
- AutoCompleteA text box that suggests as you type, with suggestions supplied by your app, single or multiple values as chips, and a button for the whole list.
- CascadeSelectA select for nested options, one column per level, opening each group beside the last.
- CheckboxA native checkbox under a drawn box, bound to a boolean or to an array of values, with a mixed state.
- ColorPickerA swatch that opens a colour panel, with a value in hex, RGB or HSB and an optional opacity slider.
- DatePickerA date field you can type into or pick from a calendar, read in the locale's format.
- DateRangeTwo dates and the days between them, picked on two months side by side or one, with the span drawn before it is committed.
- EditorRich text with its own engine and no dependency: headings, lists, tables, images, links and Markdown shortcuts, bound as sanitised HTML.
- FloatLabelA real label that starts inside the field and lifts out on focus or once there is a value; IftaLabel keeps it inside, above the value.
- FormValidation and submission built from parts that wire values, labels, hints and errors to any Vitral control, with rules or a schema.
- IconFieldAn icon inside a field, at the start or the end, with the text padded past it.
- InputGroupFields, buttons and addons welded into one control, with inner corners squared and a single border between neighbours.
- InputMaskA text box that types into a pattern, such as a phone or a date, filling in the literals for you.
- InputNumberA number box with steppers, clamped to a range and formatted in the locale, as a decimal, a currency or a percentage.
- InputOtpOne box per character of a one-time code, that moves along as you type and fills at once from a paste or autofill.
- InputPasswordA password box with a reveal button and a strength meter.
- InputTagA field whose value is a list of short strings, each shown as a removable tag, added with Enter, a separator or a paste.
- InputTextA single-line text box whose attributes land on the native input, with prefix and suffix content and a clear button.
- KnobA dial for a bounded number, set by dragging, pressing anywhere on it or the keyboard.
- LabelA native label with the fields' typography, that checks what it points at and dims when that control is disabled.
- MultiSelectA select for several choices, shown as a list, a count or chips, with an optional filter.
- RadioButtonNative radios under drawn rings, grouped by RadioGroup with one name and one v-model.
- RatingStars to rate with, in whole steps or in halves and quarters, cleared by choosing the same star again.
- SelectChoose one option from a list, with an optional filter that ignores case and accents.
- SelectButtonA segmented control for one choice, as a radio group, or several, as toggle buttons.
- SliderPick a value, or a range, by dragging along a track or with the keyboard.
- TextareaA multi-line text box on the same field chrome as InputText, that can grow with its content.
- TimePickerA time of day, typed freely or picked from a list, and kept as minutes past midnight rather than a Date.
- ToggleButtonA button that stays pressed, with its own on and off labels and icons.
- ToggleSwitchAn on/off switch over a native checkbox, with a header above and on/off content beside it.
- TreeSelectA select over a tree, with the same filter and checkbox selection as Tree.
Button 4
- ButtonA command in eight severities, four variants and three sizes, with icons, a loading state, a badge, and rendering as a link.
- ButtonGroupButtons that belong together, joined into one named control, each keeping its own tab stop.
- SpeedDialA floating button that fans its actions out, in a line or around a circle.
- SplitButtonA command with a menu of related commands welded to it.
Data 16
- ChartSVG charts with no dependency, over twenty types from one options object, with tooltips, legends, zoom and synced groups, readable from the keyboard.
- DataGridA data table that sorts, filters, pages and selects, locally or on your server, with columns the reader can resize, reorder, pin and hide.
- DataTableThe small table: rows already in hand, sorted, striped and sized, with a sticky head. DataGrid takes over when it needs more.
- DataViewSorting and paging over your own template per item, shown as a list or a grid.
- ListboxA list to choose one or several options from, always open: the sibling of Select.
- OrderListA list the reader puts in order, with buttons, the keyboard or drag and drop.
- OrganizationChartA tree drawn as a chart, with nodes that fold and open, can be selected, and take a template per node type.
- PaginatorMoves through pages of data, with first, previous, numbered, next and last buttons, and a rows-per-page choice.
- PickListTwo lists and the moves between them, with buttons, the keyboard or a double click, and reordering within each.
- ScheduleA calendar with month, week, day, agenda and resource timeline views, drag to move and resize, recurring events and any time zone.
- SpreadsheetA spreadsheet with its own formula engine and no dependency: A1 references, sixty-three functions and recalculation of only what changed.
- TaskboardA kanban board of cards in columns and swimlanes, dragged by mouse, touch or keyboard, with work-in-progress limits.
- TimelineEvents on an axis, down the page or across it, with content on one side, the other, or alternating.
- TreeHierarchical data with branches that open and close, selection by click or checkbox, a filter, and children loaded on demand.
- TreeTableRows that expand into rows, with sorting that keeps the nesting and a filter that keeps the branches leading to matches.
- VirtualScrollerRenders only the items near the viewport, so a hundred thousand rows cost what a screenful does, with lazy loading.
Panel 9
- AccordionStacked sections that open and close, one at a time or several at once, with headers that follow the WAI-ARIA accordion.
- CardA container for one piece of content: an optional header image, a title and subtitle, the content and a footer of actions.
- DividerA horizontal or vertical line between pieces of content, solid, dashed or dotted, with optional content set into it.
- FieldsetA native fieldset that names the controls inside it, and can collapse behind its legend.
- PanelA titled container that can collapse behind its header.
- ScrollPanelA scroll container with the theme's own thin bars, over native scrolling.
- StepperSteps and their panels, horizontal or vertical, with an optional linear mode that keeps later steps out of reach.
- TabsViews that share one place on the page, switched by a list of tabs.
- ToolbarA row of controls in start, center and end groups, with optional arrow-key navigation between them.
Overlay 8
- ConfirmDialogA modal question before an action, opened from anywhere with useConfirm, that can default to the safe answer.
- ConfirmPopupA confirmation anchored to the element it is about, opened with useConfirm and holding focus until answered.
- DialogA window over the page, modal or not, that takes focus in, keeps it inside and returns it when it closes.
- DrawerA panel that slides in from an edge of the viewport, or covers it, with the same modal behaviour as Dialog.
- DynamicDialogA dialog opened from code with a component as its content, which receives data and closes with a result.
- HoverCardA preview of what a link points at, shown while the pointer rests on it or focus reaches it.
- PopoverA non-modal dialog anchored to what opened it, closing on Escape, a press outside or tabbing out.
- TooltipThe v-tooltip directive: a hint shown on hover and on keyboard focus, which describes the element it sits on.
Menu 10
- BreadcrumbWhere the page sits in a hierarchy: a trail of links with the current page last and separators in between.
- CommandA search box over a list of commands that filters as you type, inline or as a modal palette opened with a hotkey.
- ContextMenuThe menu a right-click or the context-menu key opens, at the pointer or under the focused element, with submenus.
- DockA strip of large icons that grow under the pointer, each labelled with a tooltip.
- MegaMenuA menubar whose items open wide panels of grouped links in columns, like this site's own top bar.
- MenuA list of commands and links, inline or as a popup, with groups and separators.
- MenubarThe application menu bar, with nested menus, that becomes a single menu button on narrow screens.
- PanelMenuSections of navigation that expand in place, each a tree of its items, for a sidebar.
- SidebarThe collapsible application sidebar: navigation with sub-lists, that shrinks to its icons and becomes a drawer on small screens.
- TieredMenuA menu whose items open submenus beside them, to any depth, inline or as a popup.
Messages 8
- BlockUIA veil over a region, or the whole page, while it is busy, making what is under it inert and saying why.
- ChatA conversation with no dependency, in five shapes from a plain thread to an agent with its tool calls, with answers that stream in place.
- MessageAn inline message with a title, an action and a close button, in every severity.
- MeterGroupSeveral values on one bar, with a legend, read out as a single total.
- ProgressBarHow far along a task is, as a thin bar, with a value or indeterminate.
- ProgressSpinnerA ring that turns while something is running, or fills clockwise to a value.
- SkeletonThe outline of content that is still loading, in any shape, from a line of text to a whole card.
- ToastNotifications sent from anywhere with useToast, stacked at a chosen position, that pause their timer while hovered or focused.
Media 7
- AspectRatioA box that keeps its ratio as its width changes, with the content cropped to fill it.
- AvatarA face, initials or an icon in a fixed box, in three sizes and with an optional badge; AvatarGroup overlaps a row of them.
- CarouselA track of items with paging and optional rotation, which pauses on demand and while you point at or work in it.
- CropperA crop rectangle over an image, with no dependency: lock a ratio, mask a circle, rotate and flip, and crop on a server or in the browser.
- FileUploadA file input drawn as a button, a drop zone and a queue, checking type, size and count, with upload progress.
- GalleriaImages with thumbnails, indicators, rotation and a full-screen mode.
- ImageAn image that can open in a viewer over the page, with rotate and zoom.
Layout 7
- DockPanelDocks regions to its top, bottom, left and right edges and gives what is left to the fill; the order decides who wins the corners.
- GridA grid with star sizing: rows and columns sized to content, as shares of what is left, or in pixels, with children placed by row and column.
- SplitterPanels with a gutter between each pair that resizes them, by dragging or from the keyboard, within each panel's minimum.
- SplitViewA pane beside the content, inline or as an overlay, that can shrink to a strip of icons when closed.
- StackPanelArranges its children in one line, stacked or side by side, with even spacing between them.
- UniformGridA grid of equal cells that works out its rows or columns from the number of children.
- WrapPanelLays children out in a line and wraps to the next when it is full, across or down, with an optional uniform size.
Misc 6
- BadgeA count or a status dot, on its own or pinned to the corner of what it wraps with OverlayBadge.
- ChipA compact token for a filter, a recipient or a tag, with an optional image, icon and remove button.
- InplaceA display that turns into its editor when activated, and back again when done.
- ScrollTopA button back to the top of a long page or a scrolling element, shown past a threshold.
- TagA short label for a status or a category, in every severity, with an optional remove button.
- TerminalA prompt and a log, for a console inside an application, with a command history.