Example

Basic Form

Add role

Started
Summarise your responsibilities, skills and achievements.

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.

Add role

<Card>
  <Heading level="3">Add role</Heading>
</Card>

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.

Add role

<Card>
  <Heading level="3">Add role</Heading>
  <Autosuggest
    label="Job title"
    suggestions={[
      {
        text: "Developer",
      },
      {
        text: "Designer",
      },
      {
        text: "Product Manager",
      },
    ]}
  />
</Card>

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.

Add role

<Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={[
        {
          text: "Developer",
        },
        {
          text: "Designer",
        },
        {
          text: "Product Manager",
        },
      ]}
    />
  </Stack>
</Card>

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`.

Add role

Started
<Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={[
        {
          text: "Developer",
        },
        {
          text: "Designer",
        },
        {
          text: "Product Manager",
        },
      ]}
    />
    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea label="Description" />
  </Stack>
</Card>

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`.

Add role

Started
<Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={[
        {
          text: "Developer",
        },
        {
          text: "Designer",
        },
        {
          text: "Product Manager",
        },
      ]}
    />
    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea label="Description" secondaryLabel="recommended" />
  </Stack>
</Card>

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.

Add role

Started
Summarise your responsibilities, skills and achievements.
<Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={[
        {
          text: "Developer",
        },
        {
          text: "Designer",
        },
        {
          text: "Product Manager",
        },
      ]}
    />
    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea
      description="Summarise your responsibilities, skills and achievements."
      label="Description"
      secondaryLabel="recommended"
    />
  </Stack>
</Card>

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.

Add role

Started
Summarise your responsibilities, skills and achievements.
<Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={[
        {
          text: "Developer",
        },
        {
          text: "Designer",
        },
        {
          text: "Product Manager",
        },
      ]}
    />
    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea
      description="Summarise your responsibilities, skills and achievements."
      label="Description"
      secondaryLabel="recommended"
    />
    <Button>Save</Button>
  </Stack>
</Card>

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.

Add role

Started
Summarise your responsibilities, skills and achievements.
<Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={[
        {
          text: "Developer",
        },
        {
          text: "Designer",
        },
        {
          text: "Product Manager",
        },
      ]}
    />
    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea
      description="Summarise your responsibilities, skills and achievements."
      label="Description"
      secondaryLabel="recommended"
    />
    <Actions>
      <Button>Save</Button>
    </Actions>
  </Stack>
</Card>

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`.

Add role

Started
Summarise your responsibilities, skills and achievements.
<Card>
  <Stack space="xlarge">
    <Heading level="3">Add role</Heading>
    <Stack space="large">
      <Autosuggest
        label="Job title"
        suggestions={[
          {
            text: "Developer",
          },
          {
            text: "Designer",
          },
          {
            text: "Product Manager",
          },
        ]}
      />
      <TextField label="Company name" />
      <MonthPicker label="Started" />
      <Textarea
        description="Summarise your responsibilities, skills and achievements."
        label="Description"
        secondaryLabel="recommended"
      />
    </Stack>
    <Actions>
      <Button>Save</Button>
    </Actions>
  </Stack>
</Card>

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.