Components
Reusable UI building blocks for creating consistent and accessible ECOS applications.
Components are the foundation of the ECOS Design System. Each component includes usage guidance, examples, API documentation, and accessibility considerations to help you build consistent user interfaces.
Available Components
Accordion
Accordions allow users to expand and collapse sections of content, helping reduce visual clutter whilst keeping related information easily accessible.
Alert
Alerts communicate important information, warnings, errors, and success messages. They help users understand the outcome of actions, identify issues, and discover information that requires attention.
Avatar
Avatars represent users, teams, or entities throughout the interface. They can display profile images, initials, status indicators, and grouped participants.
Badge
Badges communicate status, categorisation, metadata, and other compact pieces of information. They are designed to be lightweight visual indicators that can be displayed alongside content, within tables, cards, and forms.
Breadcrumb
Breadcrumb components for displaying hierarchical navigation. Use PageBreadcrumb for most scenarios or Breadcrumb primitives for custom layouts.
Button
Buttons allow users to trigger actions, submit forms, navigate workflows, and highlight important interactions.
Calendar
Calendars allow users to view and select dates, date ranges, and other date-based values. They provide the foundation for date selection experiences such as date pickers, booking flows, and scheduling interfaces.
Card
Cards are flexible containers used to group related information, media, and actions into a visually distinct surface.
Carousel
A flexible, accessible carousel component powered by Embla Carousel.
Checkbox
Checkboxes allow users to select one or more options from a list, enable settings, or confirm acknowledgement of information.
Chip
Chips represent compact pieces of information and can optionally include leading and trailing content. They are commonly used for filtering, tagging, categorisation, and selected values.
Collapsible
Expandable and collapsible content regions built on Radix UI. Use Collapsible to progressively disclose content while keeping interfaces clean and focused.
Date Picker
Date Pickers allow users to select dates, date ranges, months, and date-time values through a consistent calendar-based interface.
Dialog
Dialogs display content in a layer above the current page and require user interaction before returning to the underlying interface. Use dialogs to present important information, request confirmation, or collect focused user input.
Dropdown Menu
Contextual menus for actions, settings, navigation, and selection. Supports menu items, checkboxes, radio groups, shortcuts, labels, separators, and nested submenus.
Input
Inputs allow users to enter, edit, and review text-based information within forms and interactive experiences.
MultiSelect
MultiSelect allows users to select multiple options from a predefined list.
Pagination
Pagination components for navigating paged content. Use Paginator for most scenarios or Pagination primitives for custom layouts.
Phone Input
Phone Input provides international phone number entry with country selection, formatting, validation support, and floating labels.
Popover
Display rich contextual content in an anchored floating panel. Popovers are ideal for previews, additional information, actions, and custom interactive content.
Radio Group
Radio Groups allow users to select a single option from a list of mutually exclusive choices.
Select
Selects allow users to choose a single option from a predefined list.
Slider
Sliders allow users to select a single value or a range of values from a predefined interval.
Snackbar
Snackbars provide brief feedback about an action or system event and may optionally include actions for user response.
Stepper
Display progress through a multi-step process using horizontal or vertical step indicators.
Switch
Switches allow users to toggle a setting or preference between enabled and disabled states.
Table
Responsive data tables for displaying structured information. Use the Table component for most scenarios or the table primitives for complete control over rendering and layout.
Tabs
Tabs organize related content into separate views, allowing users to switch between sections without leaving the current page.
TextArea
Text Areas allow users to enter, edit, and review longer blocks of text within forms and interactive experiences.
Toast
Toasts provide transient feedback about actions, events, and system status without interrupting the user workflow.
Tooltip
Tooltips provide contextual information about an element when users hover, focus, or interact with it.
Video Player
An accessible video player built on Media Chrome with configurable playback controls.