Form Renderer – styles preview

Colors

White

Light background

Dark background

Light gray

Gray

Dark gray

Blue

Red

Black

Fonts

Font family: MuseoSans, arial, sans-serif

Light 300
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Regular 400
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Regular 400 Italic
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Medium 500
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Medium 500 Italic
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Medium 500
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Medium 500 Italic
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Semi-bold 600
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Semi-bold 600 Italic
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Bold 700
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Bold 700 Italic
Lorem ipsum dolor sit amet, incididunt mollit eiusmod

Typography

Example form heading 1 Small text

Example form heading 2 Small text

Example form heading 3 Small text

Example form heading 4

Example form heading 5

Example form heading 6

Example lead paragraph. Anim non ea ut aute. Anim anim magna voluptate nostrud eu voluptate deserunt. Mollit Lorem et excepteur officia occaecat ullamco incididunt mollit eiusmod.

Example normal paragraph. Quis deserunt qui occaecat ipsum eiusmod tempor qui. Officia laboris non ea sint consectetur ullamco. Voluptate anim aliqua Lorem sunt ut labore.

Lists

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Buttons

Cards/Panels

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Alerts

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Loaders

Formio loader

KYC loader

Generating PDF

Login block

Form steps navigation

Form elements

Error valdation message on top

Error message example.

Field 1 is required. Click to navigate to the field with following error.
Field 2 custom error message.

Error validation for field

Label 1

Field 1 is required

Test your own

Paste formio JSON to test and see the preview of form: