JS Components

Plain JavaScript UI components built with basic.js. Every component with a live example and its code.

Forms & Inputs

SelectFile: Drop zone and file dialog that lists the chosen files with image previews and sizes.
TagInput: A field of chips for tags, keywords or e-mails, with suggestions, validation and paste splitting.
Stepper: Number stepper with decimals, a unit, typed editing and hold-to-repeat buttons.
InputB: Labeled text field with an icon, a unit, hints and validation; the base of the other *InputB fields.
EmailInputB: An InputB that checks e-mail addresses.
PasswordInputB: Password field with a show and hide button.
NumberInputB: An InputB that accepts only numbers.
PhoneInputB: Phone number field with a country code; one example opens a country list.
CurrencyInputB: Money field that formats the amount and shows its currency.
URLInputB: Web address field with a protocol selector.
TextareaB: Multi-line text field in the InputB style, with a character counter.
SearchInput: Search field with a search icon and a clear button.
Slider: Slider for choosing a value in a range, inspired by Material 3.
UIStepper: The first number stepper. New pages use Stepper.
UISearchBox: Search and filter boxes for light and colored backgrounds.
UINumericKeyboard: On-screen number keyboard for touch screens and kiosks.

SelectBox: Dropdown select for single or multiple selection, with select all and clear.
SelectDate: Date picker as a popup or an always visible calendar, with a month and year view.
SelectTime: Time picker with scrollable hour and minute columns, as a popup or inline.
SelectColor: Color picker: a field that opens a palette, or an always visible palette.
CheckBox: Check box with a label, drawn with code; classic and modern style packages.
RadioButton: Radio buttons that work in groups, with keyboard support and style packages.
Toggle: On and off switch for light and dark pages.
TinySelect: Small inline select that fits into a sentence: Theme: Supernova.
UIToggle: On and off switch with style presets like Google and Apple.
CheckBox (M1): The first check box. New pages use the M3 CheckBox.
SelectItem: A field that opens a searchable list of items with images.
SelectText: A field that opens a searchable text list.
UISelectText: A select field that opens a searchable list of texts.

ContextMenu: A simple menu that opens at the mouse point, with text or icon items.
ButtonWithIcon: A button with an icon and a text; the icon on the left or on top.
HoldToConfirmButton: A button that runs only after it is pressed and held; for risky actions like delete.
UIActionButton: Round floating action button in the corner of the screen.

Tabs: Tab bar with underline and pill variants, counts, badges, closable tabs, a vertical mode and optional panels.
Breadcrumbs: Shows where the current page is in a hierarchy: Home / Products / Laptops.
PageControl: Sliding or fading pages for wizards, carousels and app screens, with swipe, dots, arrows and auto play.
SearchResults: The result list that opens under a search input, like an autocomplete or a command palette.
BottomBar: Mobile app bottom bar built from a JSON list of buttons, with badges.
TextTabs: Small text tab bar. New pages use Tabs.
LeftMenu: Icon side menu that opens on hover, or with a tap on touch screens.
UITabs: The first tab bar, with icon and text tabs. New pages use Tabs.
UIPageControl: The first sliding page container. New pages use PageControl.

ChartBox: Chart.js charts used like a basic.js object.
Gauge: A value drawn on an arc: a full ring or a half arc.
MiniGraphBox: Small KPI box with a title, a value, an icon and a live bar graph.
SparkLineBox: KPI box with a line graph, a trend badge, min/max dots and a hover tooltip.
TimeLine: A vertical time line: a dot for every item and a line between the dots.
SmartTable: Virtual-scroll table for millions of rows, with filtering, sorting, custom cells and editing.
TinyTable: A light table for short data lists.
UICells: Splits a box into rows and columns of cells to place objects in them.
TinyTable (M1): The first version of the light table.

ProgressBar: Horizontal progress bar with a title and a value text; determinate or indeterminate.
Toast: Short messages that come and go: success, error, loading, and actions like Undo.
Modal: A dialog window over the page for any content; Modal.confirm() and Modal.alert() return a Promise.
SidePanel: A drawer that slides in from a side of the screen, over the page.
LoadingScreen: Full cover splash and loading screen with an icon, a title, a spinner and progress.
LineProgressBar: A progress bar drawn with thin vertical lines.
Dialog: A simple dialog window.
Tooltip: A small hint box that appears over an object.
Waiting: A waiting animation over the page while something loads.
BadgeV2: Notification badge on an object: a dot, a number or custom content.
UIProgressBar: The first progress bar. New pages use ProgressBar.
UINotice: Info, alert and error messages shown over the page.
ObjectWaiting: Waiting animation over a single object, like a button that downloads.

WebView: An iframe box with a loading spinner, errors, messages, scaled previews and a toolbar. The previews on this site use it.
LoginPage: A ready login and sign up page with e-mail, password and social buttons.
UITitle: Mobile page title bar with a back button.
UILeftTitle: A settings row with a title, a subtitle and an arrow.
UIScrollingText: A line of text that scrolls back and forth inside a small box.
UIWebView: The first iframe box. New pages use WebView.

UIEffects: Press, hover and attention effects for any basic.js object: ripple, lift, tilt, spotlight and more.
UI Standards: Design tokens and themes: colors, font sizes, corner radius and a light, dark or automatic theme.