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 Accordions
Native accordions using details and summary tags. Using the "name" attribute restricts the open state to one instance in a common named group. Alternatively, not using the "name" attribute allows the open/close state to act independent of the other accordion instances on the same page.
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