# eos > A component library for Vue. Install `@eos-ui/vue`, add `createEos()`, and use components such as `EButton` and `ETextField`. Themes are built with `defineTheme()` and checked for contrast. ## Guide ### Start - [Getting started](https://eos.dame.gg/guide/getting-started): Install, the stylesheet, the plugin and a working form - [Install options](https://eos.dame.gg/guide/install): Self-hosted fonts, auto-import, TypeScript and global component types, llms.txt, Nuxt and script tags - [Which component?](https://eos.dame.gg/guide/choosing): Select, Combobox, RadioGroup or Segmented; Dialog, Drawer or Disclosure; Notice or Toast - [Composing layouts](https://eos.dame.gg/guide/layouts): Stack, Inline, Grid, Surface, Container and AppShell - [Forms and validation](https://eos.dame.gg/guide/forms): v-model, labels, hints, errors, the error summary and focusing the first invalid field ### Build - [Data tables](https://eos.dame.gg/guide/data-tables): ETable or EDataGrid, client and manual mode, sorting, filtering, selection, formatting - [Toasts and notifications](https://eos.dame.gg/guide/toasts): useToast, EToastProvider, Toast or Notice, announcing without a toast - [Words and language](https://eos.dame.gg/guide/language): Messages, locale, currency, right to left - [Icons](https://eos.dame.gg/guide/icons): Built-in icons and bringing your own icon set ### Style - [Design principles](https://eos.dame.gg/guide/design-principles): Spacing rhythm, depth, control height, hover and focus by family, and tone, variant and status - [Theming](https://eos.dame.gg/guide/theming): defineTheme inputs, light and dark, CSS variables, scoped themes, portalTarget, cascade layers - [Token reference](https://eos.dame.gg/guide/tokens): The tokens you will use most, the theme inputs, then every colour, size, radius, shadow and motion token with usage notes and contrast - [Tailwind and CSS](https://eos.dame.gg/guide/tailwind-and-css): Overriding a component with your own classes, and using eos beside Tailwind ### Platform - [Nuxt and SSR](https://eos.dame.gg/guide/ssr): Server rendering, the theme in the head without a flash, and Nuxt setup - [Accessibility](https://eos.dame.gg/guide/accessibility): Contrast table, keyboard, forced colours, what is tested - [Versioning and support](https://eos.dame.gg/guide/versioning): Pre-1.0 stability, semver, supported Vue and browsers ### Reference - [API reference](https://eos.dame.gg/guide/api): createEos options, config, themes, messages, icons and the signature of every composable - [Composables](https://eos.dame.gg/guide/composables): useAnnouncer, useShortcuts, useCopy, useToast and the smaller helpers: when to reach for each one - [Changelog](https://eos.dame.gg/changelog): Release notes for every version of the library ## Design - [Theme playground](https://eos.dame.gg/playground): change the theme inputs (colours, corners, elevation, strokes, fonts, text and space scale, control height, motion), locale and currency, with exportable defineTheme code ## Patterns - [Pay a bill](https://eos.dame.gg/patterns/pay-a-bill): Pay a balance in full or in part. Built from: ERadioGroup, ECurrencyField, ESelect, ENotice - [Sign in](https://eos.dame.gg/patterns/sign-in): Sign in with a password or a code, and choose a new password. Built from: ENotice, ELink, EPasswordField, EOtpField, ECheckbox - [Register](https://eos.dame.gg/patterns/register): A multi-step form with a stepper, field errors and a review step. Built from: EStepper, EFieldset, EDatePicker, EPhoneField, ESignatureField - [Sign a form](https://eos.dame.gg/patterns/sign-a-form): A list of forms to sign, and signing one. Built from: ESignatureField, EUpload, EStamp, ENotice - [Settings page](https://eos.dame.gg/patterns/settings): Profile fields and switches with one Save button and a toast. Built from: EFieldset, ETextField, ESelect, ESwitch, EToastProvider - [Upload flow](https://eos.dame.gg/patterns/upload-flow): Choose files, see why one was refused, watch progress and confirm what was sent. Built from: EUpload, EProgress, ENotice, EButton, EActions - [Confirm a destructive action](https://eos.dame.gg/patterns/confirm-destructive-action): Ask before removing something, name the button for what it does, and offer Undo after. Built from: EDialog, EButton, EToastProvider, ESurface, EDescriptionList, EStamp - [Statements](https://eos.dame.gg/patterns/statements): Find, filter and open statements. Built from: ESearchBar, EActions, EExpandableRow, EEmptyState, EPagination - [Search with filters](https://eos.dame.gg/patterns/search-filters): Search, a segmented filter and a select, with a count and a way to clear. Built from: ESearchBar, ESearchResults, ESegmented, ESelect - [Data table with bulk actions](https://eos.dame.gg/patterns/data-table): A DataGrid with selection, bulk actions, a confirm dialog and a toast. Built from: EDataGrid, EDialog, EToastProvider, EStamp - [Loading and paging](https://eos.dame.gg/patterns/loading-and-paging): A paged list from a server: skeletons while it loads, an error with a retry, and a pager that keeps its place. Built from: EPagination, ESkeleton, ENotice, ESurface, EStamp, EPageHeader - [Page frame](https://eos.dame.gg/patterns/app-shell): The frame of a whole page: skip link, header, side navigation, main, footer and a page header. Built from: EAppShell, EAppHeader, ENavList, EPageHeader, EBreadcrumb, EAppFooter, EGrid, ESurface - [Command palette](https://eos.dame.gg/patterns/command-palette): Reach any page or action from the keyboard, with a button for everyone else. Built from: ECommandPalette, EButton, EKbd, EDescriptionList, EToastProvider - [Dashboard overview](https://eos.dame.gg/patterns/dashboard): A summary page: a notice, key figures and recent activity. Built from: EGrid, ESurface, EProgress, ENotice, ETable - [Empty and error states](https://eos.dame.gg/patterns/empty-and-error): Loading, error, empty and loaded versions of one list. Built from: ENotice, EEmptyState, ESkeleton, ESegmented The complete library documentation in one file: https://eos.dame.gg/llms-full.txt ## Components Every component has a page with its README and a live demo. Props are listed as name (type, default or required). ### Layout - [EAppFooter](https://eos.dame.gg/components/AppFooter): The bottom of the page: small print, privacy and terms links, contact. - [EAppHeader](https://eos.dame.gg/components/AppHeader): The bar across the top of the page, with logo, actions and a navigation row that wraps its links when they do not fit. Props: navOpen (boolean, default false), sticky (boolean, default false), navToggle (boolean, default false), brand (string), brandHref (string, default "/"), brandTo (unknown), brandLabel (string), linkComponent (string | Component, default "a") - [EAppShell](https://eos.dame.gg/components/AppShell): The frame of a whole page: skip link, header, optional side navigation, main content and footer. Props: navOpen (boolean, default false), mainId (string, default "main"), sidebarLabel (string, default "Sidebar"), navToggle (boolean, default true) - [EConfigProvider](https://eos.dame.gg/components/ConfigProvider): Changes the theme, colour scheme, language, currency, direction, words or icons for one part of the page. Props: theme (Theme | ThemeInput), scheme ("light" | "dark"), locale (string), currency (string), dir ("ltr" | "rtl"), messages (Record), icons (IconsConfig), as (string, default "div"), portal (boolean, default true) - [EContainer](https://eos.dame.gg/components/Container): The page-width column: a maximum width, centred, with the page gutter at its sides. Props: as (string, default "div"), size ("sm" | "md" | "lg" | "full", default "lg"), gutter (boolean, default true) - [EDivider](https://eos.dame.gg/components/Divider): A hairline between sections of a form or list, optionally with a centred label. Props: label (string), vertical (boolean, default false) - [EGrid](https://eos.dame.gg/components/Grid): Cards in as many equal columns as fit, responding to its container's width rather than the screen. Props: as (string, default "div"), min (string, default "16rem"), gap (1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | "tight" | "snug" | "base" | "loose" | "section" | string, default "loose"), align ("start" | "center" | "end" | "stretch" | "baseline"), justify ("start" | "center" | "end" | "stretch"), masonry (boolean, default false) - [EInline](https://eos.dame.gg/components/Inline): Children in a row that wraps when it runs out of room, for a title with a status, chips or a row of fields. Props: as (string, default "div"), gap (1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | "tight" | "snug" | "base" | "loose" | "section" | string, default "snug"), justify ("start" | "center" | "end" | "between"), align ("start" | "center" | "end" | "stretch" | "baseline"), wrap (boolean, default true) - [EPageHeader](https://eos.dame.gg/components/PageHeader): The top of a page: title, optional breadcrumb, description, status and main actions. Props: title (string, required), description (string), headingLevel (1 | 2 | 3 | 4 | 5 | 6, default 1) - [EStack](https://eos.dame.gg/components/Stack): Children in a column with an even gap. Props: as (string, default "div"), gap (1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | "tight" | "snug" | "base" | "loose" | "section" | string, default "base"), align ("start" | "center" | "end" | "stretch" | "baseline"), justify ("start" | "center" | "end" | "between"), divider (boolean, default false), wrapBelow (string) - [ESurface](https://eos.dame.gg/components/Surface): The flat, outlined card that content blocks are built from. Props: as (string, default "div"), padding (1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | "tight" | "snug" | "base" | "loose" | "section" | string), size ("sm" | "md" | "lg", default "md"), flush (boolean, default false), variant ("paper" | "raised" | "outline" | "tinted"), clip (boolean, default false) ### Content - [EAvatar](https://eos.dame.gg/components/Avatar): A person, as a photo or as their initials on a rounded tile. Props: name (string, required), src (string), size ("sm" | "md" | "lg", default "md"), presence ("online" | "away" | "busy" | "offline"), as ("span" | "button", default "span") - [EAvatarGroup](https://eos.dame.gg/components/AvatarGroup): Several people as overlapping avatars, with a "+N" tile for the rest. Props: items (AvatarGroupItem[], required), max (number, default 4), size ("sm" | "md" | "lg"), label (string) - [ECodeBlock](https://eos.dame.gg/components/CodeBlock): A block of code with a copy button. Props: code (string), lang (string, default "Code"), copyLabel (string, default "Copy code"), wrap (boolean, default false), lineNumbers (boolean, default false) - [EDataGrid](https://eos.dame.gg/components/DataGrid): A table with sorting, per-column filters, search, resizing, column toggling, row selection, and paging or virtual scrolling for thousands of rows. Props: sort (DataGridSort | null, default null), page (number, default 1), search (string, default ""), filters (Record, default {}), selected (Row["id"][], default []), columns (DataGridColumn[], required), rows (Row[], required), caption (string, required), searchable (boolean, default false), searchPlaceholder (string, default "Search all columns"), filterable (boolean, default false), resizable (boolean, default false), stickyFirst (boolean, default false), columnToggle (boolean, default false), selectable (boolean, default false), pageSize (number, default 10), maxHeight (string), virtual (boolean | DataGridVirtual), cards (boolean, default true), manual (boolean, default false), searchDebounce (number, default 0), total (number), loading (boolean, default false), skeletonRows (number, default 5), emptyTitle (string, default "No results"), emptyText (string), emptyIcon (IconProp, default "search"), error (boolean | string), rowLabel ((row: Row) => string), Field (Type, default Notes), ----------- (-----------------------------------------------------------------------, default ------------------------------------------------------------------------------------------------------------------------------------------), key (string, default Required. The default cell shows row[key].), label (string, default Required. Heading and control names.), sortable (boolean, default The heading becomes a button: ascending, descending, off.), numeric (boolean, default Right-aligns the column and shows figures in a monospaced font.), align ("center", default Centres the column.), width (number | string, default Pixels, as a number or "140px". Fixes the table layout.), minWidth (number, default Least width when resizing. Default 72.), maxWidth (number, default Most width when resizing. Default 960.), format ("number" | "currency" | "date" | (value, row) => string, default How the default cell writes its value, in the configured locale. A Date shows as a date, and a number in a numeric column as a number.), resizable (boolean, default false excludes the column from resizing.), value ((row) => string | number | Date | null | undefined, default What sorts, filters and searches. Set it when the cell is a slot.), filter ({ type: "text" }, { type: "select", options }, { type: "number" }, default number is a minimum and maximum.) - [EDefinition](https://eos.dame.gg/components/Definition): A term that opens a small floating panel with a definition or short explanation. Props: modelValue (boolean, default false), label (string, required), title (string), headingLevel (1 | 2 | 3 | 4 | 5 | 6, default 3), inline (boolean, default false) - [EDescriptionList](https://eos.dame.gg/components/DescriptionList): Label and text rows, ruled apart, for facts such as what a statement covers or when it is due. Props: items ((DescriptionItem | null | undefined)[], required) - [EExpandableRow](https://eos.dame.gg/components/ExpandableRow): A one-line row that opens to more: a leading item, a title with a subtitle, and a value at the end. Props: open (boolean, default false), title (string, required), subtitle (string), group (string), disabled (boolean, default false) - [EHeading](https://eos.dame.gg/components/Heading): The six heading levels, with an optional kicker label above. Props: level (1 | 2 | 3 | 4 | 5 | 6, default 2), as ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div" | "span", default the heading for level), kicker (string) - [EHighlight](https://eos.dame.gg/components/Highlight): A short run of text set off by the accent colour: a name, a value or a word worth noticing inside a sentence. Props: code (boolean, default false), swatch (string) - [EIcon](https://eos.dame.gg/components/Icon): One icon, 20px by default, in the colour of the surrounding text, for putting a glyph beside text. Props: name (IconProp, required), size ("sm" | "md" | "lg" | "xl", default "md"), bold (boolean, default false), label (string), flip (boolean) - [EKbd](https://eos.dame.gg/components/Kbd): A keyboard key drawn as a small keycap, for a shortcut hint such as "Press / to search". Props: size ("sm" | "md", default "md") - [EKicker](https://eos.dame.gg/components/Kicker): A small label above a value or a section. Props: as (string, default "p") - [EMetric](https://eos.dame.gg/components/Metric): One figure with its label, an optional change and a line of help. Props: label (string, required), value (number | string, required), delta (string), trend ("up" | "down" | "flat"), tone ("neutral" | "success" | "danger"), help (string) - [EStamp](https://eos.dame.gg/components/Stamp): A small non-interactive mark with a word that says where something stands, such as paid or overdue. Props: status ("paid" | "due" | "overdue" | "action" | "scheduled" | "confirmed" | "cancelled" | "signed" | "pending" | "complete"), tone ("neutral" | "info" | "success" | "warning" | "danger"), label (string, default preset's word, else Status), icon (IconProp), detail (string), size ("sm" | "md"), final (boolean, default false) - [ETable](https://eos.dame.gg/components/Table): A plain table for facts that are read, not worked: specifications, prices, comparisons, reference lists. Props: caption (string, required), hideCaption (boolean, default false), striped (boolean, default false), size ("sm" | "md", default "md"), maxHeight (string), cards (boolean, default false), loading (boolean, default false), skeletonRows (number, default 5), empty (boolean, default false), emptyTitle (string, default "No results"), emptyText (string), emptyIcon (IconProp, default "search") - [ETag](https://eos.dame.gg/components/Tag): A small paper tag that labels or categorises something, and can be removed. Props: label (string, required), tone ("neutral" | "info" | "success" | "warning" | "danger", default "neutral"), size ("sm" | "md", default "md"), icon (IconProp), removable (boolean, default false) - [EText](https://eos.dame.gg/components/Text): Running text in three sizes (body, sm, lg), capped at a readable line length. Props: size ("sm" | "md" | "lg", default "md"), tone ("neutral" | "info" | "success" | "warning" | "danger"), align ("start" | "center" | "end"), weight ("medium" | "strong"), mono (boolean, default false), truncate (boolean, default false), lines (number), measure (boolean, default true), as (string, default "p") - [EVisuallyHidden](https://eos.dame.gg/components/VisuallyHidden): Text that is read out but not shown, for context sighted people get from layout, such as the receipt number after a Download button. Props: as (string, default "span") ### Actions - [EActions](https://eos.dame.gg/components/Actions): A group of buttons in the order of the content, main action first, left-aligned, wrapping when there is no room. Props: as (string, default "div"), bar (boolean, default false), label (string) - [EButton](https://eos.dame.gg/components/Button): A button for an action: one primary per screen, the other variants rank below it. Props: variant ("primary" | "secondary" | "outline" | "danger" | "quiet", default "primary"), icon (IconProp), iconEnd (IconProp), size ("sm" | "md" | "lg", default "md"), block (boolean, default false), disabled (boolean, default false), type ("button" | "submit" | "reset", default "button"), href (string), external (boolean, default false), loading (boolean, default false) - [ECopyButton](https://eos.dame.gg/components/CopyButton): An icon button that copies text and shows a check mark. Props: text (string | (() => string), required), label (string, default "Copy"), timeout (number, default 2000) - [EIconButton](https://eos.dame.gg/components/IconButton): An icon-only button with a target as tall as the control height, for rows where a text button would crowd. Props: icon (IconProp, required), label (string, required), variant ("quiet" | "primary" | "secondary" | "outline" | "danger", default "quiet"), size ("sm" | "md" | "lg", default "md"), disabled (boolean, default false), loading (boolean, default false), type ("button" | "submit" | "reset", default "button"), tooltip (boolean, default false) - [ELink](https://eos.dame.gg/components/Link): An inline anchor for going somewhere. Props: href (string), to (unknown), linkComponent (string | Component, default "a"), external (boolean, default false), icon (IconProp) ### Forms - [ECalendar](https://eos.dame.gg/components/Calendar): A month grid to choose a day or a span, with names, week start and date order from the configured locale. Props: modelValue (Date | null, default null), start (Date | null, default null), end (Date | null, default null), mode ("single" | "range", default "single"), disabledDate ((date: Date) => boolean), marked (Date[] | ((date: Date) => boolean)), markLabel (string, default "times available"), min (Date), max (Date), month (Date), footer (boolean, default true), clearable (boolean, default false) - [ECheckbox](https://eos.dame.gg/components/Checkbox): A single yes/no choice. Props: modelValue (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), label (string, required), description (string), indeterminate (boolean, default false), bare (boolean, default false), name (string), value (string) - [ECheckboxGroup](https://eos.dame.gg/components/CheckboxGroup): Any number of several related options, checked into an array. Props: modelValue (T[], default []), hideLabel (boolean, default false), hint (string), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), label (string, required), options ((T | CheckboxOption)[], required), error (string), required (boolean, default false), name (string), id (string, default generated), orientation ("vertical" | "horizontal", default "vertical") - [EColorField](https://eos.dame.gg/components/ColorField): A colour input as #rrggbb: a swatch that opens the native picker plus a text box for typing a hex value, for theme and brand settings. Props: modelValue (string, default ""), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), label (string, required), name (string) - [ECombobox](https://eos.dame.gg/components/Combobox): An input that filters a list as you type and only accepts an option from it. Props: modelValue (string | string[], default "" or []), open (boolean, default false), hideLabel (boolean, default false), ariaLabel (string), label (string), bare (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), multiple (boolean, default false), freeform (boolean, default false), options (readonly EOptionInput[], required), placeholder (string), name (string), loading (boolean, default false), emptyText (string, default "No matches"), clearable (boolean, default false), filter ((option: EOption, query: string) => boolean, default label or description contains query) - [ECurrencyField](https://eos.dame.gg/components/CurrencyField): An amount of money: an ENumberField with the currency symbol in front, the currency's own decimals and no negatives. Props: modelValue (number | null, default null), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), label (string, required), currency (string, default configured currency), locale (string, default configured locale), min (number, default 0), max (number), step (number, default the currency's smallest unit (0.01 for dollars, 1 for yen)), prefix (string), suffix (string), name (string) - [EDatePicker](https://eos.dame.gg/components/DatePicker): A date field with a text box in the locale's order and a button that opens an ECalendar popup. Props: modelValue (Date | null | string, default null as never), open (boolean, default false), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), label (string, required), min (Date), max (Date), disabledDate ((date: Date) => boolean), marked (Date[] | ((date: Date) => boolean)), footer (boolean, default true), valueFormat ("date" | "iso", default "date"), name (string) - [EField](https://eos.dame.gg/components/Field): The label, hint and error wrapper for a control the system does not wrap itself. Props: label (string, required), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), id (string, default generated) - [EFieldset](https://eos.dame.gg/components/Fieldset): Related controls in a bordered box. Props: legend (string), bare (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), section (boolean, default false), disabled (boolean, default false), legendClass (string), hideLegend (boolean, default false), id (string, default generated) - [EForm](https://eos.dame.gg/components/Form): A form that checks its fields before it submits and, when some are invalid, lists them in one summary and moves focus there. Props: submitting (boolean, default false), summary (boolean, default true), focusTarget ("summary" | "field", default "summary") - [ENumberField](https://eos.dame.gg/components/NumberField): A number input with decrease and increase buttons, for quantities. Props: modelValue (number | null, default null), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), label (string, required), min (number), max (number), step (number, default 1), prefix (string), suffix (string), name (string), locale (string, default configured locale) - [EOtpField](https://eos.dame.gg/components/OtpField): A one-time code entered one character per box, with paste and SMS autofill support. Props: modelValue (string, default ""), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), label (string, default "Verification code"), length (number, default 6), inputmode ("numeric" | "text", default "numeric"), groupSize (number, default 0), name (string), autoFocus (boolean, default false) - [EPasswordField](https://eos.dame.gg/components/PasswordField): A password input with a Show and Hide toggle and an optional live checklist of rules. Props: modelValue (string, default ""), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), loading (boolean, default false), label (string, default "Password"), mode ("current" | "new"), rules (PasswordRule[]), placeholder (string), name (string) - [EPhoneField](https://eos.dame.gg/components/PhoneField): A phone number input that groups digits as you type. Props: modelValue (string, default ""), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), loading (boolean, default false), label (string, default "Phone number"), format ("us" | "e164" | "none", default us for the en-US locale, else none), placeholder (string), valueFormat ("formatted" | "e164" | "digits", default "formatted"), name (string), clearable (boolean, default false) - [ERadioGroup](https://eos.dame.gg/components/RadioGroup): Exactly one of five or fewer options. Props: modelValue (T), hideLabel (boolean, default false), hint (string), error (string), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), label (string, required), options ((T | RadioOption)[], required), required (boolean, default false), name (string, default generated), id (string, default generated), orientation ("vertical" | "horizontal", default "vertical") - [ERangePicker](https://eos.dame.gg/components/RangePicker): Two date boxes and one calendar popup for choosing a date span, with presets. Props: start (Date | null | string, default null as never), end (Date | null | string, default null as never), open (boolean, default false), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), label (string, required), min (Date), max (Date), disabledDate ((date: Date) => boolean), marked (Date[] | ((date: Date) => boolean)), valueFormat ("date" | "iso", default "date"), startName (string), endName (string), presets (RangePreset[], default Last 7 days, Last 30 days, This month) - [ESearchBar](https://eos.dame.gg/components/SearchBar): The single search box for a page: an outlined field with a submit button inside. Props: modelValue (string, default ""), size ("sm" | "md" | "lg", default "md"), loading (boolean, default false), label (string, default "Search"), placeholder (string, default "Search"), action (string, default "Search"), hideAction (boolean, default false), clearable (boolean, default false), name (string), disabled (boolean, default false) - [ESearchResults](https://eos.dame.gg/components/SearchResults): A list of search results as links, with a title and a muted line under it, arrow-key movement between them and the matched text marked. Props: items (SearchResultItem[], required), label (string, required), emptyText (string), query (string), linkComponent (string | Component, default "a") - [ESegmented](https://eos.dame.gg/components/Segmented): A joined set of two to five options where exactly one is active. Props: modelValue (T, default first option), label (string, required), options ((T | SegmentedOption)[], required), hint (string), error (string), optional (boolean, default false), required (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), name (string, default generated) - [ESelect](https://eos.dame.gg/components/Select): A dropdown for choosing one option from a list, when options need more than a line of text. Props: modelValue (T | "" | T[]), open (boolean, default false), hideLabel (boolean, default false), ariaLabel (string), label (string), bare (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), options (readonly EOptionInput[], required), placeholder (string, default "Select"), multiple (boolean, default false), clearable (boolean, default false), loading (boolean, default false), name (string) - [ESignatureField](https://eos.dame.gg/components/SignatureField): Signing a form by typing a name, drawing it, or either, plus an agreement checkbox. Props: modelValue (SignatureValue, default { method: "type", name: "", image: "", agreed: false }), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), label (string, default "Signature"), mode ("type" | "draw" | "both", default "type"), agreement (string, default "I agree and want to sign this form."), date (Date, default today), name (string) - [ESignaturePad](https://eos.dame.gg/components/SignaturePad): A signature drawn with a finger, stylus or mouse. Props: modelValue (string, default ""), height (number, default 160), hint (string), error (string), required (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated) - [ESlider](https://eos.dame.gg/components/Slider): Picks a number, or a span of two, by dragging or with the arrow keys. Props: modelValue (number | [number, number]), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), label (string, required), min (number, default 0), max (number, default 100), step (number, default 1), range (boolean, default false), marks (boolean | number[]), format ((value: number) => string), name (string) - [ESwitch](https://eos.dame.gg/components/Switch): A switch for a setting that takes effect the moment it is flipped. Props: modelValue (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), label (string, required), description (string), name (string), value (string) - [ETextarea](https://eos.dame.gg/components/Textarea): A labelled multi-line text input that resizes vertically. Props: modelValue (string, default ""), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), label (string, required), placeholder (string), rows (number, default 4), name (string), autocomplete (string), maxlength (number), counter (boolean, default false), autoGrow (boolean, default false) - [ETextField](https://eos.dame.gg/components/TextField): A labelled single-line text input with hint, error and optional unit. Props: modelValue (string, default ""), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), size ("sm" | "md" | "lg", default "md"), loading (boolean, default false), label (string, required), placeholder (string), type (string, default "text"), prefix (string), suffix (string), name (string), submitValue (string), autocomplete (string), maxlength (number), counter (boolean, default false), clearable (boolean, default false) - [EUpload](https://eos.dame.gg/components/Upload): A dropzone for attaching files, clickable and droppable, listing the chosen files with their size. Props: modelValue (File[], default []), hideLabel (boolean, default false), hint (string), error (string), required (boolean, default false), optional (boolean, default false), disabled (boolean, default false), readonly (boolean, default false), id (string, default generated), label (string, required), accept (string), multiple (boolean, default false), maxSize (number), maxFiles (number), name (string) ### Navigation - [EBreadcrumb](https://eos.dame.gg/components/Breadcrumb): The path to the current page, two or more levels deep. Props: items (BreadcrumbItem[], required), linkComponent (string | Component, default "a"), label (string, default "Breadcrumb"), maxItems (number) - [ELinkCard](https://eos.dame.gg/components/LinkCard): A card that is one link: a title that says where it goes and a line or two under it, where the whole card is the click target. Props: title (string, required), href (string), to (unknown), linkComponent (string | Component, default "a"), external (boolean, default false), as (string, default "div"), size ("sm" | "md" | "lg", default "md") - [ENavList](https://eos.dame.gg/components/NavList): All link navigation: the sidebar list for an app, or the navigation row of an EAppHeader, with optional counts and a current-page marker. Props: items (NavItem[]), sections (NavSection[]), orientation ("vertical" | "horizontal", default "vertical"), label (string, default "Main"), linkComponent (string | Component, default "a"), isCurrent ((item: NavItem) => boolean) - [EPagination](https://eos.dame.gg/components/Pagination): Previous, Next and page-number buttons for paging through a long list. Props: modelValue (number, default 1), pageCount (number, required), href ((page: number) => string), label (string, default "Pagination") - [ESkipLink](https://eos.dame.gg/components/SkipLink): A link, hidden until focused, that lets keyboard users jump past navigation to the main content. Props: href (string, default "#main") - [EStepper](https://eos.dame.gg/components/Stepper): Shows where a person is in a multi-step flow such as registration. Props: steps (Step[], required), label (string, default "Progress"), interactive (boolean, default false), orientation ("horizontal" | "vertical") - [ETabs](https://eos.dame.gg/components/Tabs): Tabs for switching between views of the same record or list. Props: modelValue (string, default first tab), items (TabItem[]), fill (boolean, default false), orientation ("horizontal" | "vertical", default "horizontal"), side ("start" | "end", default "start"), label (string) ### Feedback - [EEmptyState](https://eos.dame.gg/components/EmptyState): The panel shown when a list, search or table has no content. Props: icon (IconProp), title (string, required), headingLevel (1 | 2 | 3 | 4 | 5 | 6, default 3), bare (boolean, default false), tone ("neutral" | "danger", default "neutral"), size ("sm" | "md", default "md") - [ENotice](https://eos.dame.gg/components/Notice): An inline message that stays until it is dealt with. Props: tone ("neutral" | "info" | "success" | "warning" | "danger", default "info"), title (string, required), headingLevel (1 | 2 | 3 | 4 | 5 | 6), titleId (string), role (string | false), icon (IconProp), closable (boolean, default false) - [EProgress](https://eos.dame.gg/components/Progress): A progress bar. Props: label (string, default "Progress" with a value, "Loading" without), value (number), max (number, default 100), valueText (string, default percent) - [ESkeleton](https://eos.dame.gg/components/Skeleton): A placeholder shown while content loads. Props: height (number | string, default 96), width (number | string, default full width), circle (boolean, default false), lines (number), text (boolean, default false), label (string) - [ESpinner](https://eos.dame.gg/components/Spinner): A ring that shows a single action is in progress. Props: label (string), size ("sm" | "md" | "lg", default "md"), block (boolean, default false) - [EToast](https://eos.dame.gg/components/Toast): A floating message that confirms or reports something just done. Props: title (string, required), tone ("neutral" | "info" | "success" | "warning" | "danger", default "info"), icon (IconProp), closable (boolean, default true), live (boolean, default true) - [EToastProvider](https://eos.dame.gg/components/ToastProvider): Renders the toast region once at the app root and provides useToast(), so any component inside can show a toast. Props: limit (number, default 5) ### Overlays - [ECommandPalette](https://eos.dame.gg/components/CommandPalette): A search box over a list of commands, opened from anywhere with a shortcut. Props: open (boolean, default false), query (string, default ""), items (CommandItem[], required), label (string, required), placeholder (string, default "Type a command or search"), shortcut (string | false, default "mod+k"), filter (boolean, default true), score ((item: CommandItem, query: string) => number), loading (boolean, default false), emptyText (string, default "No results") - [EDialog](https://eos.dame.gg/components/Dialog): A modal dialog for a short decision. Props: open (boolean, default false), title (string, required), description (string), role ("dialog" | "alertdialog", default "dialog"), headingLevel (1 | 2 | 3 | 4 | 5 | 6, default 2), size ("sm" | "md" | "lg", default "md"), initialFocus (string), dismissible (boolean, default false), inline (boolean, default false) - [EDisclosure](https://eos.dame.gg/components/Disclosure): A section that opens and closes, for secondary detail. Props: open (boolean, default false), title (string), group (string), disabled (boolean, default false) - [EDrawer](https://eos.dame.gg/components/Drawer): A side panel that slides in from an edge, for reading something beside the list, such as a statement or receipt. Props: open (boolean, default false), title (string, required), description (string), role ("dialog" | "alertdialog", default "dialog"), headingLevel (1 | 2 | 3 | 4 | 5 | 6, default 2), side ("end" | "start" | "bottom", default "end"), size ("sm" | "md" | "lg", default "sm"), initialFocus (string), dismissible (boolean, default false), inline (boolean, default false) - [EMenu](https://eos.dame.gg/components/Menu): A button that opens a short list of actions. Props: open (boolean, default false), label (string, required), items (readonly EMenuItem[], required), variant ("primary" | "secondary" | "outline" | "danger" | "quiet", default "outline"), icon (IconProp), side ("bottom" | "top" | "start" | "end", default "bottom"), align ("start" | "center" | "end", default "start"), collisionPadding (number, default 16) - [ETooltip](https://eos.dame.gg/components/Tooltip): A short label that names an icon-only control. Props: open (boolean, default false), label (string, required), side ("top" | "bottom" | "start" | "end", default "top"), delay (number, default 400)