Skip to content
GolemUI

Rent a car: Introduction

This tutorial walks through building a complete Rent a Car form. By the end, you’ll have used most of the features GolemUI offers — layout, validators, states, custom item renderers, async data with debouncing, and form submission — in one connected example.

What you’ll build

Section titled “What you’ll build”

A form that lets a customer:

  • pick a car model from a dropdown (search-as-you-type, custom item renderer with image and details),
  • pick a collect-from office dropdown,
  • toggle “Choose a different return location” to reveal a return-to office dropdown,
  • pick a rental dates range (a range calendar),
  • pick a rental type from a radio group,
  • confirm the driver is aged over 25 with a toggle,
  • toggle “I have a discount code” to reveal a discount code input,
  • submit the form, with the submit button disabled until everything is valid.

Tutorial chapters

Section titled “Tutorial chapters”

Work through them in order — each chapter builds on the previous one.

  1. Parts of the form — author the static layout with all the input widgets.
  2. States and conditional rendering — wire the toggles to show/hide fields, and disable the submit button when invalid.
  3. A custom item renderer — design the per-car list item with image, name, and price.
  4. Search as you type — load the car list from a service, filter server-side, debounce the input.
  5. Submitting the form — capture the submit event and read the data.

Layout convention

Section titled “Layout convention”

This tutorial follows the GolemUI default: gui.layouts.grid for rows (CSS subgrid keeps labels and inputs aligned), gui.layouts.flex for columns.

See also

Section titled “See also”