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

Web widgets showcase

{"_back":"^?panel=","cbon":"1","chips":"CA\nDE","color":"#426915","country":"US","date":"2026-06-04","disabled":"Uneditable","disabledcbon":"1","disableddropdown":"b","disabledmulti":"Uneditable\nmultiple\nlines","disabledrange":"90","disabledrich":"home","disabledstars":"2","disabledtoggleon":"1","dropdown":"b","month":"2026-06","multi":"Multiple\nlines of text\nare allowed","north":"1","range":"50","rich":"Hello \u003cb\u003eWorld\u003c/b\u003e!","season":"1","sentiment":"4","stars":"4","states":"CA","time":"19:15:00","toggleon":"1","tz":"US/Pacific","west":"1"}

Form input widgets

Text
Disabled
Integer
Range
Zero to 100% at 10% increments
Disabled range
Email
URL
Password
Numeric OTP
Color
Multiple lines
Disabled multiple lines
Month
Date and time
Time zone
Host and port
Dropdown selector
Disabled dropdown selector
Rich drop down
California
  • Alabama
  • Alaska
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • Florida
  • Georgia
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
  • Kansas
  • Kentucky
  • Louisiana
  • Maine
  • Maryland
  • Massachusetts
  • Michigan
  • Minnesota
  • Mississippi
  • Missouri
  • Montana
  • Nebraska
  • Nevada
  • New Hampshire
  • New Jersey
  • New Mexico
  • New York
  • North Carolina
  • North Dakota
  • Ohio
  • Oklahoma
  • Oregon
  • Pennsylvania
  • Rhode Island
  • South Carolina
  • South Dakota
  • Tennessee
  • Texas
  • Utah
  • Vermont
  • Virginia
  • Washington
  • West Virginia
  • Wisconsin
  • Wyoming
Disabled rich drop down
is where the is
File
Drop a file or click to browse
Checkboxes
Radio buttons
Disabled radio buttons
Filter chips
West
East
North
South
Input chips
BlankCaliforniaDelaware
    Switch toggles
    Star rating
    Sentiment rating
    Star rating disabled
    Rich text editor

    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