Skip to content

Open in Wappler

Front-End Input Widgets

A learning hub for richer front-end input components in Wappler, covering autocomplete, editors, tag entry, and date/time picking.

Front-End Input Widgets

Use this hub when plain text inputs are no longer enough. Demo Projects HQ already gives you a concrete reference page in the new-task form: #task_project uses autocomplete for guided lookup, #task_start and #task_due use date-time pickers for scheduling, #task_tags uses Tagify for structured multi-value input, and the surrounding form keeps validation and submit feedback in the same workflow.

That makes this hub easier to read in context: choose the richer input surface you need, but keep its stored value, validation rules, and editing behavior understandable inside a real form.

Front-end input widgets

Start from the real Demo Projects HQ task form, then open the focused widget tours.

Suggestions and editors

Autocomplete Component

Use the Autocomplete component to narrow suggestions as users type while keeping the selected value predictable.

Summernote WYSIWYG Editor

Use the Summernote editor when content authors need formatted rich text input inside a Wappler page.

Tag entry

Tagify Component

Use Tagify for token-style input when users need to select, create, or manage multiple labels in one field.

Tagify Custom Content

Customize Tagify item and suggestion rendering so tag-heavy interfaces stay informative without turning into plain text chips.

Tagify Store New Tags

Let Tagify create new tags deliberately and store them cleanly when your data model allows user-generated labels.

Dates and scheduling

Date Range Picker with Dynamic Values

Bind a date range picker to dynamic values so filters and date-based views stay synchronized with real page state.

Date Range Picker for Insert and Update

Use date range inputs in create and edit workflows without losing the relationship between stored values and displayed ranges.

Time Picker with Date Picker

Combine date and time picking when users need one coherent schedule value instead of disconnected inputs.

Go to

Front-End Components

Start here for UI building in Wappler: Bootstrap components, forms, themes, and the editor surfaces used to shape frontend behavior.

Open destination

Bind form inputs, configure validation, and build repeatable sections using concrete Demo Projects HQ pages where possible.

Open destination

Wappler Docs Index

Browse Wappler tours by topic and jump into areas like Why Wappler, Learning the Basics, and Wappler's UI.

Open destination