Examples /

Basic Form

How do I build this example for myself?

Designs like this are rarely built top-to-bottom in a single pass. Instead, they typically start very simple, with further details and refinements added in layers.To give you a sense of what this looks like, the following tutorial will guide you through the design process that you might go through when using Playroom.At any stage you can click the “Open in Playroom” button under the examples to view the design across themes and viewports.

1. Create the card with a heading

To get started, we can use a Card as the container for the form, as well as providing a Heading.

Open in Playroom

2. Add the first field

Let’s add the first field to the form using the Autosuggest component. We’ll give it a `label` and also provide some suggestions.

Open in Playroom

3. Space out the content

You’ll notice that there is no space between the heading and field by default. This is actually a good thing! We now get to decide exactly how spaced out we want the content to be. To achieve this, we’ll use a Stack component which applies space evenly between its child elements.

Open in Playroom

4. Add some more fields

Now that we have described how we want to manage the space within the `Card`, we can add more fields to the form by placing them within this `Stack`.

Let’s add a TextField, MonthPicker and a Textarea, providing each of them with a `label`.

Open in Playroom

5. Add additional information to a field

Sometimes it is necessary to provide more information to a field, either adding additional context, indicating whether a field is optional, or even providing field specific help. All fields within Braid support a `secondaryLabel`, `tertiaryLabel` and `description`.

Let’s encourage the users of this form to provide a description by marking it as “recommended” using the `secondaryLabel`.

Open in Playroom

While we’re at it, we can also add a `description` to provide more context to the user—prompting them with what sort of information they should provide.

Open in Playroom

6. Add the button

Now that we have all of our form fields in the card, we can now add a Button to submit the form.

Open in Playroom

You’ll notice the button is the full width of the card. This is fine from a mobile perspective, but less that ideal on a larger device.

We can address this by wrapping the button in an Actions component. Now it will be full width on mobile and only as wide as its content on larger screens.

Open in Playroom

7. Polish!

Now that we have all our elements in place we can polish until we are happy. Adjusting white space between elements across mobile, tablet and desktop to achieve the desired goal.In this case, we might define the space around the form fields to be tighter than the space between the heading and button. We can achieve this by wrapping the fields in a `large` spaced `Stack`, and also increase the `space` on the first `Stack` to `xlarge`.

Open in Playroom

Next steps

Now that you are familiar with the code we have just written, this is a good chance to head over to Playroom and continue refining this design.You may want to consider:

Specifying different spacing responsively using Stack,
Add a Dropdown field labelled “Work type” with a list of options.
Constrain the width of card on larger devices using Columns.