Form

Full prototype-grade form composed of Form + FieldSet + Field + leaf components.

View in Figma

Maintenance request

Location

Where is the issue you're reporting?

Details

We'll route urgent requests immediately.

<Form onSubmit={handleSubmit}>
  <Form.Heading>Maintenance request</Form.Heading>
  <Form.Content>
    <FieldSet>
      <FieldSet.Heading>
        Location
      </FieldSet.Heading>
      <FieldSet.Fields>
        <Field>
          <Field.Label required>
            Building
          </Field.Label>
          <Field.Content>
            <Combobox
              options={SAMPLE_OPTIONS}
              placeholder="Select a building"
              …
            />
          </Field.Content>
        </Field>
        <Field>
          <Field.Label>Room or area</Field.Label>
          <Field.Content>
            <Input
              placeholder="e.g. Conference room A"
            />
          </Field.Content>
        </Field>
      </FieldSet.Fields>
    </FieldSet>
    <FieldSet>
      <FieldSet.Heading>Details</FieldSet.Heading>
      <FieldSet.Fields>
        <Field>
          <Field.Label required>
            Priority
          </Field.Label>
          <Field.Content>
            <Combobox
              options={PRIORITY_OPTIONS}
              placeholder="Select priority"
              …
            />
          </Field.Content>
        </Field>
        <Field>
          <Field.Label required>
            Describe the issue
          </Field.Label>
          <Field.Content>
            <TextArea
              placeholder="What's wrong?"
            />
          </Field.Content>
        </Field>
        <Field>
          <Field.Content>
            <Checkbox
              label="This is urgent"
              description="We'll route urgent requests immediately."
            />
          </Field.Content>
        </Field>
      </FieldSet.Fields>
    </FieldSet>
  </Form.Content>
  <Form.Footer>
    <Button variant="outline">Cancel</Button>
    <Button buttonType="submit">
      Submit request
    </Button>
  </Form.Footer>
</Form>
Props
onSubmit:(e) => void
Standard form submit handler.
(slots):Form.Heading / .Content / .Footer
Composition sub-components.
Tokens