🔗 🍽️ Examples & Recipes

Discover practical examples and patterns for building reactive, modular components with UIElement. Each example focuses on showcasing a specific feature or best practice, guiding you through real-world use cases.

🔗 Counter

A simple click counter. Gets initial value from inner span element and increments it on click.

Source Code

🔗 Number Formatter

Display a number with a specific format using Intl.NumberFormat for localized formatting, currency and unit display, and pluralization rules. Gets locale from the component's or inherited lang attribute. Full support for all options of Intl.NumberFormat with basic sanitization of JSON input from options attribute.

inherited (en):
de-CH:
fr-CH:
ar-EG:
zh-Hans-CN-u-nu-hanidec:

Source Code

🔗 Carousel

Fully accessible and responsive carousel component.

🔗 Slide 1

Your name

Hello, World!

🔗 Slide 2

🔗 Slide 3

🔗 Slide 4

🔗 Slide 5

Source Code

🔗 Combobox

A combobox component that allows users to select an option from a list.

Choose a city

Tell us where you live so we can set your timezone for our calendar and notification features.

Source Code

🔗 Todo App

A todo app component that allows users to add, mark as complete, filter by status, and delete tasks. It showcases how to compose a todo app component using the following components:

<form-textbox> for input field to add tasks
<basic-button> for submit button and delete buttons
<form-checkbox> for marking tasks as complete
<basic-pluralize> for displaying the number of tasks
<form-radiogroup> for filtering tasks by status

ModuleTodo Source Code

FormTextbox Source Code

BasicButton Source Code

FormCheckbox Source Code

BasicPluralize Source Code

FormRadiogroup Source Code

🔗 Lazy Loading

This example shows how to handle asynchronous data loading and error states. Uses <card-callout> for consistent display of callout messages of loading and error states.

ModuleLazy Source Code

CardCallout Source Code

Slides