Request forms

Quotes, bookings, callbacks and document uploads, each asking only what the business needs to answer.

4 components · 16 variants

Switch category

On this page

Every component of this category. Pick one to jump to its variants.

Booking request4
Callback request4
File request4
Request a quote4

booking-request

Booking request

Requests for bookings a person confirms, unlike instant appointments. A room for an event with live capacity, a holiday home on exact or flexible dates, a package with a total that counts along, a workshop on one of three dates.

Event venue
Flexible dates
Packages
Proposed dates

Props and details

Event venue

Kind of event, date, guests and extras. Beside the form the rooms answer live whether they fit, each bar is as long as the room is big and fills with the guests.

Installv1.0.0

aiw add @ai-website/booking-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, number-input, switch, date-input

Usage

<BookingRequest variant="event-venue" kinds={[{ value, label, icon }]} spaces={[{ name, capacity, note }]} extras={[…]} today="2026-10-21" />

Source

Flexible dates

Exact dates on a two month calendar with the nights counted, or flexible on months and a length. Adding a child opens a field for its age, each one rises in.

Installv1.0.0

aiw add @ai-website/booking-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, number-input, switch, date-input

Usage

<BookingRequest variant="flex-dates" months={["November", "December", …]} today="2026-10-21" />

Source

Packages

Package cards rise in one after another, the chosen one holds an accent ring. Extras show their price, and a total beside the form counts along with every choice and every person.

Installv1.0.0

aiw add @ai-website/booking-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, number-input, switch, date-input

Usage

<BookingRequest variant="packages" packages={[{ value, name, price, perPerson, includes }]} extras={[{ value, label, price }]} currency="€" />

Source

Proposed dates

Up to three proposed dates on a numbered rail, each filled one turns into a check. Then the format, the group size and the company for the invoice.

Installv1.0.0

aiw add @ai-website/booking-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, number-input, switch, date-input

Usage

<BookingRequest variant="date-options" formats={[{ value, label, icon }]} minGuests={4} maxGuests={40} today="2026-10-21" />

Source

callback-request

Callback request

A number and a moment, and the business calls. Days and time windows with booked ones paused, a live status with the wait and a call right now, one row for a hero, or the topic that decides who calls.

Time slots
Now or later
Inline bar
Topic and person

Props and details

Time slots

Days as tabs with a sliding marker and the free windows counted, windows as chips with booked ones paused. The line at the bottom says in words when the call comes and changes with every choice.

Installv1.0.0

aiw add @ai-website/callback-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, checkbox

Usage

<CallbackRequest variant="time-slots" days={[{ value, label, windows: [{ value, label, full }] }]} dialCode="+49" />

Source

Now or later

A live status with a breathing dot and the wait in minutes. Call now is one field and one large button, pick a time opens days and windows with a soft height.

Installv1.0.0

aiw add @ai-website/callback-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, checkbox

Usage

<CallbackRequest variant="now-or-later" available wait={3} hours="Mon to Fri, 8 am to 8 pm" days={[…]} dialCode="+49" />

Source

Inline bar

One row for a hero, a pricing page or a footer, the number field and the button side by side, the opening hours with a live dot. Confirms in place without leaving the page.

Installv1.0.0

aiw add @ai-website/callback-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, checkbox

Usage

<CallbackRequest variant="inline-bar" title="Prefer to talk?" hours="…" promise="…" dialCode="+49" />

Source

Topic and person

The topic decides who calls, and that person appears beside the form with initials, role and languages. Before a topic is chosen the whole team waits there in a row.

Installv1.0.0

aiw add @ai-website/callback-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, checkbox

Usage

<CallbackRequest variant="topic-agent" agents={[{ topic, label, icon, name, role, languages }]} days={[…]} />

Source

file-request

File request

Asking for documents and getting them back complete. One row per document, one drop for everything that sorts itself, a request from a firm with a deadline, and the review of what came back with the reason when a new version is needed.

Checklist
Drop everything
Request from a firm
Review status

Props and details

Checklist

One row per document with its own upload, the icon turns into a check and the row tints when it is there. A bar on top fills to complete, files are checked for type and size with a reason.

Installv1.0.0

aiw add @ai-website/file-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, select

Usage

<FileRequest variant="checklist" documents={[{ id, title, hint, icon, accept, max, optional }]} maxMb={20} />

Source

Drop everything

One large zone for all files, it lifts and lights up while files hover over it. Each file is sorted into the list by its name, a wrong guess is fixed with a select, the list beside it ticks itself off.

Installv1.0.0

aiw add @ai-website/file-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, select

Usage

<FileRequest variant="single-drop" documents={[{ id, title, keywords: ["payslip"] }]} />

Source

Request from a firm

A firm asks for documents. Beside the list stand who asks, the deadline with the days left and the promise that only they see it. Each document carries a note from the person who asks.

Installv1.0.0

aiw add @ai-website/file-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, select

Usage

<FileRequest variant="portal" requester={{ name, person, message, deadline, daysLeft }} documents={[{ id, title, note }]} />

Source

Review status

What came back and where it stands, in a bar of states and one row per document. A document that needs a new version says why and offers the upload right there, everything else stays as it is.

Installv1.0.0

aiw add @ai-website/file-request

Brings along utils, kit, button, icon, reveal, section, motion, form-flow, select

Usage

<FileRequest variant="review-status" documents={[{ id, title, file, status: "rejected", reason }]} />

Source

request-quote

Request a quote

Asking for a price, shaped for the business. A project brief with budget range and files, product lines for wholesale, fields that change with the kind of job, or the choice between writing and a call.

Project brief
Product lines
Fields by type
Write or call

Props and details

Project brief

Topics to tap, a budget range with two handles, deadline, files and contact. Beside it the person who answers and what happens next, on a rail whose steps rise in one after another.

Installv1.0.0

aiw add @ai-website/request-quote

Brings along utils, kit, button, icon, input, textarea, select, slider, number-input, file-upload, checkbox, date-input, motion, reveal, section, form-flow

Usage

<RequestQuote variant="brief" topics={[…]} budget={{ min, max, step, currency }} steps={[{ icon, title, text }]} contact={{ name, role, reply }} />

Source

Product lines

A request for quotation as product lines with quantity and unit, lines are added and removed, the totals count along. From tablet up a table with column heads, on phones every line is a small card.

Installv1.0.0

aiw add @ai-website/request-quote

Brings along utils, kit, button, icon, input, textarea, select, slider, number-input, file-upload, checkbox, date-input, motion, reveal, section, form-flow

Usage

<RequestQuote variant="line-items" units={["pcs", "boxes", "pallets"]} lines={[{ item, quantity, unit }]} />

Source

Fields by type

Kinds of job as tabs with a sliding marker. Each kind brings its own fields, which glide in from the side of the chosen tab. Answers of a kind stay when switching back.

Installv1.0.0

aiw add @ai-website/request-quote

Brings along utils, kit, button, icon, input, textarea, select, slider, number-input, file-upload, checkbox, date-input, motion, reveal, section, form-flow

Usage

<RequestQuote variant="by-type" types={[{ value, label, icon, description, fields: [{ name, label, kind }] }]} />

Source

Write or call

Two short ways in on a switch with a sliding tile, the fields change with the way. Beside it the person who answers, the number to call right now and what happens next.

Installv1.0.0

aiw add @ai-website/request-quote

Brings along utils, kit, button, icon, input, textarea, select, slider, number-input, file-upload, checkbox, date-input, motion, reveal, section, form-flow

Usage

<RequestQuote variant="call-or-form" windows={[…]} contact={{ name, role, phone, reply }} steps={[…]} />

Source

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Request forms on a page.

Copied to the clipboard