textbox
A single-line text field with Data binding, shared labelbox and validation.
Try the example ↗The collection / Available & ahead
Components with
a common language.
One JavaScript component definition describes the browser behavior and generates the grammar Python reads. The widget names stay the same in both languages.
Available now
Explore the collection.
17 input widgets, three command components and six layout components. Each link opens a running Python example.
26 components · all available
checkbox
A boolean control with a caption. Use mode="switch" for a switch and switch_color for its active color.
Try the example ↗radioButtonText
A group of mutually exclusive options. The Data holds the selected code.
Try the example ↗textBoxArea
Multiline editing with the same binding, field state and validation model.
Try the example ↗passwordbox
A masked text editor. Masking is presentation, not encryption or secure storage.
Try the example ↗radioButton
Individual boolean radio controls that join an exclusive Source-scoped group.
Try the example ↗colorpicker
A native color picker with shared labelbox and reactive value.
Try the example ↗horizontalSlider
A horizontal numeric range with keyboard interaction and live or committed changes.
Try the example ↗verticalSlider
A vertical numeric range; minimum at the bottom and maximum at the top.
Try the example ↗numberTextBox
Locale-aware text editing for numbers, integers and exact Decimal values. Invalid drafts do not replace Data.
Try the example ↗dateTextBox
Civil date editing, natural expressions and an integrated calendar popup; calendar can be disabled.
Try the example ↗timeTextBox
Edit a civil time with hours, minutes and optional seconds. Formatting uses the page context.
Try the example ↗filteringSelect
Filter local option captions and store the chosen code. A constrained selection, not free text.
Try the example ↗callbackSelect
Obtain choices through named Logic callbacks, including Promises. The gallery searches random samples.
Try the example ↗comboBox
Suggestions with free-text entry; stores the entered string.
Try the example ↗checkBoxText
Multiple choices as a comma-separated code string, with null for no selection.
Try the example ↗dateCalendar
An inline calendar bound to a civil date, also used by the dateTextBox popup.
Try the example ↗formlet
A responsive field layout with shared label settings and automatic per-column label alignment.
Try the example ↗groupBox
A labelled group with optional copy: TYTX preserves types; a menu offers JSON.
Try the example ↗button
A Gramlot web component for actions, confirmations and delayed commands. html_button stays native.
Try the example ↗toggleButton
A command button with an LED and boolean value; its pressed state follows Data.
Try the example ↗dropDownButton
Main surface executes the default; the arrow opens a menu. Shift-select executes and sets a new default, with optional persistence.
Try the example ↗borderContainer
A workspace with border regions, live splitters and drawers; its center uses the remaining space.
Try the example ↗contentPane
A content panel used inside containers to hold fields, views and nested layouts.
Try the example ↗tabContainer
Switch between mounted panels with tabs, selection, icons, badges and optional closing.
Try the example ↗stackContainer
Show one mounted panel at a time, with selection driven by the application instead of a tab strip.
Try the example ↗No components match this search. Try another name or capability.
Not just a bag of widgets
Shared behavior.
Less repeated work.
Labels that belong to the field.
Labelbox provides lbl, lbl_* and box_* settings. Move labels above, beside or below a control, even through a binding. Formlet aligns left labels to the widest label in each column.
A consistent editing contract.
Controls share Data bindings, read-only and disabled state. Typed editors parse and format numbers, dates and times. Validation separates an unaccepted draft from accepted Data.
Presentation that can change.
Base, Compact, mimi and joanna themes; light and dark modes; touch sizing. Theme variables and CSS parts provide styling hooks. Page device metadata describes intended suitability.
Around the components
The rest of the framework.
HTML & SVG
Use native elements alongside Gramlot components. html_button remains a plain HTML button; button adds Gramlot command behavior.
Bindings & computed behavior
Data setters, formulas and controllers. Reactive pointers, relative scopes, attribute templates and expressions, with formatting and masks.
Page services & remote content
Typed endpoint calls, remote Source fragments and lazy Data resolvers. Hosts supply the server environment without becoming a dependency of the core.
Messages & commands
Publish/subscribe, parent–child frame messaging through postMessage, references, confirmations and delayed actions.
Typed values & formatting
Bags and TYTX carry structured typed values. Page locale and timezone guide formatting. Natural date expressions supplement ordinary date entry.
Inspection & reusable pages
Data, Source and Styles inspection; a reusable index page with iframe tabs; root-page manifest support for installation where the browser supports it.
In preparation · no delivery dates promised
A foundation to build on.
These are future workstreams. They are deliberately separate from the available component catalogue.
Data connections & stores
Database records and selections, shared stores and the data services behind richer business interfaces. DB-specific validation belongs here.
Store-backed trees, grids & more layout
Store-backed tree and grid widgets and button bars remain separate workstreams. This catalogue lists the verified examples linked above. Border, tab and stack containers are available in the linked gallery examples; a broader collection remains a separate workstream.
Text localization
Typed localizable strings and collection of labels and messages. Locale-aware number/date formatting is already available; translation of application text is a separate step.
CONTINUE HERE