Skip to content
UI Kit
Accent color

Applications and sign-ups

Job applications, event registrations and longer forms split into calm steps.

3 components · 13 variants
Switch category

On this page

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

multi-step-form

Multi-step form

Long forms cut into calm steps, described as data. Every step checks its own fields and focuses the first open one, going back keeps every answer, and the last step can show everything for a final look.

Props and details · Multi-step form

Side rail

The steps sit in a rail that fills as the visitor moves on, finished steps can be opened again. On phones and tablets the rail becomes a bar with the next step named.

Open in Studio

Progress on top

One calm column with a bar that fills on top. Each step slides in from the side it comes from, and the actions say what happens next.

Open in Studio

Review before sending

A last step shows every answer grouped by step. Change opens that step, and its button leads straight back to the overview.

Open in Studio

Steps on one page

All steps stand on one page. The open one has a soft accent, finished ones fold into a single line with their answers and a way back in.

Open in Studio

Live summary

Beside the form the request builds itself, every answer rises into its line and a ring counts what is done. On phones and tablets the summary is a bar that opens.

Open in Studio

application-form

Application form

Applying for a role, a shift or a programme. CV checked on the way in, a letter as file or written in place, the privacy note says how long data is kept, and every send names what is missing.

Props and details · Application form

Job application

The role stays in view beside the form with its facts and what the job is about. CV as a checked PDF, the letter written in place or uploaded, earliest start, salary, a link and the privacy note with retention.

Open in Studio

Quick apply

For shifts and hourly jobs, made for the phone. Name and number in large fields, days and shifts as chips, CV only if there is one. The whole form fits a minute.

Open in Studio

Guided letter

Three short prompts with a word count each instead of a blank page. Beside them the answers become a letter while typing, every paragraph rises in, the send button sits under the letter.

Open in Studio

Eligibility first

Three yes or no questions before anything else. An answer that does not fit explains itself on the spot, and only when everything fits does the application open with a soft height.

Open in Studio

registration

Registration

Signing up for an event, a course or a tournament, for one person or many. A block per ticket, dates with seats left and a waitlist, a team with a captain, ticket types with proof and workshops that warn about a clash.

Props and details · Registration

Several attendees

The ticket count makes one block per person, new ones rise in. The first can take the buyer details with one tick, food is chosen per person, the total counts along at the bottom.

Open in Studio

Dates with seats

Each date shows the seats left on a bar that fills to what is taken, few seats are set in bold. A full date stays choosable, a note opens and the button turns into the waitlist.

Open in Studio

Team

Team name, category and a captain in a highlighted box, then members with shirt sizes. Dots count up to the minimum and turn into "ready to start", a new member line takes the focus.

Open in Studio

Tickets and workshops

Ticket types as cards, a reduced ticket opens an upload for its proof. Workshops sit in their time slots, choosing two at the same time marks the slot and says which to drop.

Open in Studio

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Applications and sign-ups on a page.

Often searched

Jump to

Copied to the clipboard