Behind the Framework
Reduce Complexities & Improve Performance
Native HTML
Showcase of lesser known native UI solutions.
Data List Select
The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
Learn moreDate & Color Picker
<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. This example sets a default value date of 2022-04-01 and then we use JS to update the value to 2006-10-31 and log to console. Only using CSS, it also validates input with a visual indicator.
Learn moreNative Form Validation
Native HTML form validation can be accomplished without any JavaScript.
Learn moreNative Dialog
The HTML <dialog> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.
Learn moreNative Multi Select
The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Learn moreNative Popover
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.
Learn moreStyling a Native Select Element
This example uses CSS variables and a small theming system to showcase styling capabilities on a native select. Here the browser chrome defines the UI when selecting options. This native implementation assures a reliable and predictable user experience on desktop and mobile devices.
Learn morePicklist
Leverage checkboxs or radio groups for highly functional and native picking experiences. Note the use of grid-area 1/1 placing the label over the checkbox element.
Learn moreProgress, meter & range elements
The <progress> & <meter> HTML elements display an indicator showing the completion progress of a task, typically displayed as a progress bar. Input type range allows a user to select a rage by draging the indicator.
Learn more