BRAID
Braid Logo
 

Examples /

Basic Form

Add role

    Suggestions will appear below the field as you type
    Started
    Summarise your responsibilities, skills and achievements.
    Open in Playroom

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

    Add role

      Suggestions will appear below the field as you type
      <Card>
  <Heading level="3">Add role</Heading>
  <Autosuggest
    label="Job title"
    suggestions={filterSuggestions([
      { text: "Developer" },
      { text: "Designer" },
      { text: "Product Manager" },
    ])}
  />
</Card>
      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.

      Add role

        Suggestions will appear below the field as you type
        <Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={filterSuggestions([
        { text: "Developer" },
        { text: "Designer" },
        { text: "Product Manager" },
      ])}
    />
  </Stack>
</Card>
        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`.

        Add role

          Suggestions will appear below the field as you type
          Started
          <Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={filterSuggestions([
        { text: "Developer" },
        { text: "Designer" },
        { text: "Product Manager" },
      ])}
    />

    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea label="Description" />
  </Stack>
</Card>
          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`.

          Add role

            Suggestions will appear below the field as you type
            Started
            <Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={filterSuggestions([
        { text: "Developer" },
        { text: "Designer" },
        { text: "Product Manager" },
      ])}
    />

    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea label="Description" secondaryLabel="recommended" />
  </Stack>
</Card>
            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.

            Add role

              Suggestions will appear below the field as you type
              Started
              Summarise your responsibilities, skills and achievements.
              <Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={filterSuggestions([
        { text: "Developer" },
        { text: "Designer" },
        { text: "Product Manager" },
      ])}
    />

    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea
      label="Description"
      secondaryLabel="recommended"
      description="Summarise your responsibilities, skills and achievements."
    />
  </Stack>
</Card>
              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.

              Add role

                Suggestions will appear below the field as you type
                Started
                Summarise your responsibilities, skills and achievements.
                <Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={filterSuggestions([
        { text: "Developer" },
        { text: "Designer" },
        { text: "Product Manager" },
      ])}
    />

    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea
      label="Description"
      secondaryLabel="recommended"
      description="Summarise your responsibilities, skills and achievements."
    />

    <Button>Save</Button>
  </Stack>
</Card>
                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.

                Add role

                  Suggestions will appear below the field as you type
                  Started
                  Summarise your responsibilities, skills and achievements.
                  <Card>
  <Stack space="large">
    <Heading level="3">Add role</Heading>
    <Autosuggest
      label="Job title"
      suggestions={filterSuggestions([
        { text: "Developer" },
        { text: "Designer" },
        { text: "Product Manager" },
      ])}
    />

    <TextField label="Company name" />
    <MonthPicker label="Started" />
    <Textarea
      label="Description"
      secondaryLabel="recommended"
      description="Summarise your responsibilities, skills and achievements."
    />

    <Actions>
      <Button>Save</Button>
    </Actions>
  </Stack>
</Card>
                  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`.

                  Add role

                    Suggestions will appear below the field as you type
                    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={filterSuggestions([
          { text: "Developer" },
          { text: "Designer" },
          { text: "Product Manager" },
        ])}
      />

      <TextField label="Company name" />
      <MonthPicker label="Started" />
      <Textarea
        label="Description"
        secondaryLabel="recommended"
        description="Summarise your responsibilities, skills and achievements."
      />
    </Stack>
    <Actions>
      <Button>Save</Button>
    </Actions>
  </Stack>
</Card>
                    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.