Page Title

Use this sentence to briefly describe the purpose of the page.

Do This
Step X of X Description of Step
Go back one step Go forward one step

Form Portion 1

Use Minor dividers to indicate relationships between form elements when needed

This accepts any kind of alphanumeric characters.
My presented value aligns with input fields’ values.
This tells the browser to present a date-optimized UI.
On mobile browsers this presents a phone number-optimized UI.
On mobile browsers this presents an email-optimized UI.
This presents a search-optimized UI.
On mobile browsers this presents a URL-optimized UI.
This presents a numeric-optimized UI.

Form Portion 2

Both form portions belong together in the same large data set being collected, but each section as fields more tightly related to each other than other elements in the form. Breaking visually associated form elements into groups helps ease the 'wall of scary' when entering data.

This presents a file-selection UI.

Group of Checkboxes

Group of Radios

Label

Off On
We'll never share your email with anyone else.

Which will you choose?

Which will you choose?

Heading

Label

Value

Label

Value

Label

Value

Label

Value

Label

Value

Label

Value

Label

Value

Label

Value

Label

Value

Heading

Table caption describes the data presented.
User Role Figma Trained Team
John Boss No OTS
Susan Developer No EA
Deborah Business Analyst Yes OTS
Rick Business Analyst Yes DOC
Kevin Product Owner No OJJ
José Tester No OMV
Bob Business Analyst Yes OMV
Jane Database Administrator No DOC
Todd Developer No DOC
Frank Developer No OTS

Tab 1

I am content in a tabbed content section.

Other content fits into here too. From rows and columns to paragraphs to forms.

Tab 2

I am content in a tabbed content section.

Other content fits into here too.

Tab 3

I am content in a tabbed content section.

Other content fits into here too.