Components

Field / Field Set

A form field (label + content + description/error, vertical or horizontal), and the FieldSet that groups related fields under a heading.

View in Figma

Choose the building this request applies to.

<Field>
  <Field.Label>Building</Field.Label>
  <Field.Content>
    <Combobox
      options={SAMPLE_OPTIONS}
      placeholder="Select a building"
      …
    />
  </Field.Content>
  <Field.Description>
    Choose the building this request applies to.
  </Field.Description>
</Field>
<Field hasError>
  <Field.Label required>Building</Field.Label>
  <Field.Content>
    <Combobox
      options={SAMPLE_OPTIONS}
      placeholder="Select a building"
      error
      …
    />
  </Field.Content>
  <Field.Error>Building is required.</Field.Error>
</Field>

Pick the building this request applies to.

<Field>
  <Field.Label>Building</Field.Label>
  <Field.DescriptionTop>
    Pick the building this request applies to.
  </Field.DescriptionTop>
  <Field.Content>
    <Combobox
      options={SAMPLE_OPTIONS}
      placeholder="Select a building"
      …
    />
  </Field.Content>
</Field>
<Field contentLayout="horizontal">
  <Field.Label>Date range</Field.Label>
  <Field.Content>
    <Input placeholder="Start" />
    <Input placeholder="End" />
  </Field.Content>
</Field>
<Field fieldLayout="horizontal">
  <Field.Label>Building</Field.Label>
  <Field.Content>
    <Combobox
      options={SAMPLE_OPTIONS}
      placeholder="Select a building"
      …
    />
  </Field.Content>
</Field>
<Field fieldLayout="horizontal">
  <Field.Label>
    Primary point of contact
  </Field.Label>
  <Field.Content>
    <Input placeholder="Name" />
  </Field.Content>
</Field>

Location

Where is the issue you're reporting?

Optional — helps the technician find it faster.

<FieldSet>
  <FieldSet.Heading>Location</FieldSet.Heading>
  <FieldSet.Description>
    Where is the issue you're reporting?
  </FieldSet.Description>
  <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.Description>
        Optional — helps the technician find it faster.
      </Field.Description>
    </Field>
  </FieldSet.Fields>
</FieldSet>
Props
Field
fieldLayout:"default" | "horizontal"= "default"
default stacks label / content; horizontal puts label beside content.
contentLayout:"default" | "horizontal"= "default"
Layout inside Field.Content.
hasError:boolean= false
Toggles visibility of Field.Error.
(slots):Field.Label / .DescriptionTop / .Content / .Description / .Error
Composition sub-components.
FieldSet
(slots):FieldSet.Heading / .Description / .Fields
Composition sub-components. Heading is heading-2; Fields is the vertical stack.
Tokens