Using and adding forms

Looking for an input field, switch, checkbox, slider, or radio selector components? Come on in!

Updated today

About Forms

In Uizard, a 'Form' is a component type that encompasses input fields, switches, sliders, checkboxes, and radio selectors.

In this guide, you'll get to know one of the Uizard component types - 'Forms'.
โ€‹
If you've just started prototyping with Uizard - it's a fantastic article to skim through to understand 'Forms' adding and styling specifics better ๐Ÿ‘


Inserting a Form

1) Click 'Form' on the left-hand menu.
โ€‹
โ€‹

2) Find a 'Form' you want by using the search function or scrolling through the pop-up window and drag & drop a selected 'Form' on your project:
โ€‹


Editing drop-down/dropdown content

1) Click the drop-down in your project that you'd like to change the options for:

2) Click the "Options" button on the in-line toolbar or click the "Design" button on the right-hand menu:

3) Find the "State" section in the Design menu and adjust as needed:

4) You can edit the options, rearrange them by dragging them, or add items:


Setting the checkbox and radio selector state

Changing the checkbox state means you can make it so it's pre-checked or empty when a user first sees it! The same steps apply to changing the state of radio selectors as well!

1) Click on the checkbox you want to change the state of:

2) The easiest way to turn this on and off is to click the check-mark box to toggle it on and off in the in-line toolbar:

3) The other way to toggle the status on and off is to click the "..." in the in-line toolbar or the "Design" menu button on the right-hand menu:

4) Then, you'll find the checkbox for the "Show enabled state" section under "State" in the Design toolbar:


Setting the range slider position

1) Click the range slider in your project that you'd like to adjust the position of:

2) Click on the "Value" button on the in-line toolbar or the "Design" button on the right-hand menu:

3) Find the "Value" input area under "State" in the menu. Type in the range number you'd like to position the slider at, or you can drag it visually on the right-hand side where you'd like it to be positioned:


FAQs

Can I add required fields to a form?

Required fields are not currently available on the Uizard platform yet.

Did this answer your question?