Components

EletroDS Vue 3 provides a set of reusable components built with Vue 3 and Tailwind CSS.

Available Components

ButtonBar

Action buttons with overflow menu, optional options dropdown, and tooltips.

CriterionInput

A component used to compose and edit filters.

DualList

A double list used to pick items from one list to another

Forehead

A document header component used to structure and emphasize important information.

Input

Text input with optional mask support via maska config.

InputDate

An input component for date selection.

InputDateMultiple

An input component for multiple date selection.

InputMultiple

An input for multiple values with optional, responsive overflow support.

LoginForm

A complete login form component with email/password fields, locale select, remember me, reCAPTCHA slot, and footer links.

NavBar

A navigation bar located at the bottom of the page on smaller screens.

SelectMultiple

A multiple selection input with search and autocomplete support. Based on Nuxt UI's UInputMenu with multiple selection enabled.

Spinner

A loading indicator component with three variations - border, grow, and logo.

Tooltip

A popup that reveals information when hovering over an element.

All EletroDS components share these common features:

All components follow the same design principles and use the EletroDS color palette.

Full type definitions for props, events, and slots.

Built with WCAG guidelines in mind for inclusive user experiences.

Components are designed to work across all screen sizes.