{"modal":"/showcase/form-input"}

Web widgets showcase

Text formatting

The Material typography scale and inline text-style helpers — colors, weights, sizes — across the framework's font stack.
open_in_newweb_assetdock_to_right

Code blocks

Server-side syntax highlighting via Chroma, with token classes mapped to Material design colors so the same markup recolors on theme change.
open_in_newweb_assetdock_to_right

Progress widget

Determinate and indeterminate progress indicators, plus the finite/infinite progress-status pattern for long-running operations.
open_in_newweb_assetdock_to_right

Toolbar widget

An action toolbar with grouped buttons and separators. Buttons that share a parent are automatically gathered into a toolbar without explicit configuration.
open_in_newweb_assetdock_to_right

Gallery widget

A horizontally-scrolling gallery of cards. Useful for featured-content rows or any list where horizontal swipe beats vertical scroll.
open_in_newweb_assetdock_to_right

Deck of cards widget

A responsive grid of cards that re-flows between 1, 2, and more columns depending on the viewport width. Good for dashboards or any uniform collection.
open_in_newweb_assetdock_to_right

Tab switcher widget

Tabbed content with smooth switching between sections. Each tab body is rendered server-side and revealed via the same state-driven redraw that powers the rest of the framework.
open_in_newweb_assetdock_to_right

Navigation widgets

The three flavors of side navigation — a compact strip, a labeled rail, and a full drawer — all driven by the same widget tree and adapting to the viewport.
open_in_newweb_assetdock_to_right

Form input widgets

Every form input widget on one page — text, email, password, OTP, dates, ranges, dropdowns, file uploads, color pickers, checkboxes, radios, star/sentiment ratings, filter and input chips, toggle switches, and the rich-text editor.
open_in_newweb_assetdock_to_right

Form validation

Client-side and server-side form validation working together: required fields, pattern matching, length limits, and custom predicate functions, with inline error messages that survive a server round-trip.
open_in_newweb_assetdock_to_right

Data table

A sortable, filterable, paginated table over a small US-states dataset. Quick-search, column sort, and page-size controls all use the same incremental-redraw plumbing the rest of the framework uses.
open_in_newweb_assetdock_to_right

CRUD

Standard create / read / update / delete flow over a per-session in-memory directory of contacts. Demonstrates form-driven persistence with validation, duplicate detection, and a record cap.
open_in_newweb_assetdock_to_right

Charts

Apache ECharts wrapped as bespa widgets. Bar, pie, column, and a US-states map all themed against the Material design tokens, with live theme switching.
open_in_newweb_assetdock_to_right

Mermaid

Mermaid diagrams (flowcharts, sequence, class, state, gantt) rendered client-side, themed against the Material design tokens, with optional zoom and pan interaction.
open_in_newweb_assetdock_to_right