V2 componentsUpdated Oct 1, 2026

Field

Lays a label, a control and a note out together and wires them to each other. Built on Base UI Field, so htmlFor, aria-describedby and aria-invalid are generated rather than hand-passed.

Import

Source: packages/ui/src/components/field

tsx

1import { Field } from '@highlight/ui'

Label, control, note

Clicking the label focuses the control. required prints the asterisk and sets the attribute.

Workspace name

Work email

We only use this for meeting invites.

tsx

1import { Field, Input } from '@highlight/ui'2 3export default function FieldBasic() {4  return (5    <div className="flex w-80 flex-col gap-5">6      <Field>7        <Field.Label>Workspace name</Field.Label>8        <Input placeholder="Acme design…" />9      </Field>10 11      <Field required>12        <Field.Label>Work email</Field.Label>13        <Input type="email" placeholder="you@acme.com" />14        <Field.Note>We only use this for meeting invites.</Field.Note>15      </Field>16    </div>17  )18}

vertical stacks the label, control and note. horizontal puts the label in a fixed 120px lane and lets the control fill. justified lets the label fill and sizes the control to itself, for a settings row. leading puts a checkbox or radio first, on the label’s first line.

Label

Help text.

Label

Help text.

Label

Help text.

tsx

1import { Checkbox, Field, Input, Select, type SelectItemType } from '@highlight/ui'2 3const THEMES: Array<SelectItemType> = [4  { label: 'System', value: 'system' },5  { label: 'Light', value: 'light' },6  { label: 'Dark', value: 'dark' },7]8 9export default function FieldOrientations() {10  return (11    <div className="flex w-full max-w-md flex-col gap-8">12      <Field>13        <Field.Label>Label</Field.Label>14        <Input />15        <Field.Note>Help text.</Field.Note>16      </Field>17 18      <Field orientation="horizontal">19        <Field.Label>Label</Field.Label>20        <Input />21        <Field.Note>Help text.</Field.Note>22      </Field>23 24      <Field orientation="justified">25        {/* A trigger is button-like, so the label is not a native one: it would hand the trigger its hover. */}26        <Field.Label nativeLabel={false}>Label</Field.Label>27        <Field.Note>Help text.</Field.Note>28        <Select items={THEMES} defaultValue="system">29          <Select.Trigger />30          <Select.Content>31            {THEMES.map((item) => (32              <Select.Item key={String(item.value)} value={item.value}>33                {item.label}34              </Select.Item>35            ))}36          </Select.Content>37        </Select>38      </Field>39 40      <Field orientation="leading">41        <Field.Label nativeLabel={false}>Label</Field.Label>42        <Checkbox defaultChecked>43          <Checkbox.Indicator />44        </Checkbox>45        <Field.Note>Help text.</Field.Note>46      </Field>47    </div>48  )49}

Where the note goes

The note sits under whichever side has room: the control in a form row, the label in a settings row. Under a label it is 2px away; under a control, 6px.

Rolling buffer

A long note wraps into the column that has room, which in a settings row is the label’s.

tsx

1import { Field, Input, Select, type SelectItemType } from '@highlight/ui'2 3const BUFFER: Array<SelectItemType> = [4  { label: 'Off', value: 'off' },5  { label: '5 minutes', value: '5' },6  { label: '15 minutes', value: '15' },7]8 9export default function FieldNotePlacement() {10  return (11    <div className="flex w-full max-w-md flex-col gap-8">12      <Field orientation="horizontal">13        <Field.Label>Notification email</Field.Label>14        <Input type="email" />15        <Field.Note>A long note wraps into the column that has room, which in a form row is the control’s.</Field.Note>16      </Field>17 18      <Field orientation="justified">19        <Field.Label nativeLabel={false}>Rolling buffer</Field.Label>20        <Field.Note>21          A long note wraps into the column that has room, which in a settings row is the label’s.22        </Field.Note>23        <Select items={BUFFER} defaultValue="5">24          <Select.Trigger />25          <Select.Content>26            {BUFFER.map((item) => (27              <Select.Item key={String(item.value)} value={item.value}>28                {item.label}29              </Select.Item>30            ))}31          </Select.Content>32        </Select>33      </Field>34    </div>35  )36}

Field group

Field.Group is a fieldset: disabled on it disables every control, and legend names the set. Fields sit 20px apart.

Full name

Work email

We only use this to find your team.

Job title

tsx

1import { Field, Input } from '@highlight/ui'2 3export default function FieldGroupExample() {4  return (5    <Field.Group className="max-w-md">6      <Field required>7        <Field.Label>Full name</Field.Label>8        <Input placeholder="Lin Fan" autoComplete="name" />9      </Field>10      <Field required>11        <Field.Label>Work email</Field.Label>12        <Input type="email" placeholder="you@company.com" autoComplete="email" spellCheck={false} />13        <Field.Note>We only use this to find your team.</Field.Note>14      </Field>15      <Field>16        <Field.Label>Job title</Field.Label>17        <Input placeholder="Head of Design" autoComplete="organization-title" />18      </Field>19    </Field.Group>20  )21}

A settings list is the same group

orientation on the group sets every field to that shape and tightens the spacing to match: 16px for settings rows, 12px for checkbox rows.

Screen recording

Captures the active window.

Audio

Clipboard

tsx

1import { Field, Select, type SelectItemType } from '@highlight/ui'2 3const CAPTURE: Array<SelectItemType> = [4  { label: 'On', value: 'on' },5  { label: 'Off', value: 'off' },6]7 8function CaptureSelect({ defaultValue }: { defaultValue: string }) {9  return (10    <Select items={CAPTURE} defaultValue={defaultValue}>11      <Select.Trigger />12      <Select.Content>13        {CAPTURE.map((item) => (14          <Select.Item key={String(item.value)} value={item.value}>15            {item.label}16          </Select.Item>17        ))}18      </Select.Content>19    </Select>20  )21}22 23export default function FieldSettingsList() {24  return (25    <Field.Group orientation="justified" className="max-w-md">26      <Field>27        <Field.Label nativeLabel={false}>Screen recording</Field.Label>28        <Field.Note>Captures the active window.</Field.Note>29        <CaptureSelect defaultValue="on" />30      </Field>31      <Field>32        <Field.Label nativeLabel={false}>Audio</Field.Label>33        <CaptureSelect defaultValue="on" />34      </Field>35      <Field>36        <Field.Label nativeLabel={false}>Clipboard</Field.Label>37        <CaptureSelect defaultValue="off" />38      </Field>39    </Field.Group>40  )41}

Validation and disabled

Note match narrows an error to one ValidityState key, so a field answers each way of being wrong with its own sentence.

Work email

Workspace URL

Contact support to change this.

tsx

1import { Field, Input } from '@highlight/ui'2 3export default function FieldValidation() {4  return (5    <div className="flex w-80 flex-col gap-5">6      <Field required validationMode="onBlur">7        <Field.Label>Work email</Field.Label>8        <Input type="email" required placeholder="you@acme.com" />9        <Field.Note error match="valueMissing">10          We need an email to send invites to.11        </Field.Note>12        <Field.Note error match="typeMismatch">13          That is not a full email address.14        </Field.Note>15      </Field>16 17      <Field disabled>18        <Field.Label>Workspace URL</Field.Label>19        <Input defaultValue="acme.highlight.ing" />20        <Field.Note>Contact support to change this.</Field.Note>21      </Field>22    </div>23  )24}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Field: Base UI Field.Root. Lays out label, control and note by orientation and wires their ids; required and disabled reach the control.
Field.Label: A real <label>, wired to the control and placed as a sibling of it. srOnly, nativeLabel.
Field.Group: A fieldset of fields. orientation sets each field’s shape and the gap; legend titles the set.
Field.Note: Help text at rest; error renders it as the field error, narrowed by match.
Field.Item: One option in a RadioGroup or checkbox group: control, Label and Note laid out like a leading Field. disabled greys the whole option.
Field.Control / Validity: Base UI parts, for what the wrapper does not cover.

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`orientation`	'vertical'\|'horizontal'\|'justified'\|'leading'	'vertical'	Form column, form row with a label lane, a settings row with the control at the far end, or a checkbox row with the control first. Defaults to the enclosing Field.Group’s.
`required`	boolean	false	Prints the asterisk on the label and marks the control required, from one flag.
`invalid`	boolean	—	Forces the invalid state without waiting for validation.
`disabled`	boolean	—	Disables the control; the label and note take the disabled colour with it.
`validationMode`	'onSubmit'\|'onBlur'\|'onChange'	'onSubmit'	When the control revalidates. onChange takes validationDebounceTime.
`validate`	(value, formValues) => string \| string[] \| null	—	Custom validation.
`name`	string	—	Field name, used by Base UI Form for validation and submission.

Notes

One structure everywhere: Field.Label, the control, then Field.Note, as siblings. The orientation decides where each lands.
Any control that reads Base UI Field picks the wiring up by sitting inside: Input, Select.Trigger, Checkbox.
Pass nativeLabel={false} on Label when the control is button-like. A native label hands its hover to the control, so a Select.Trigger would light up whenever the pointer crossed the words.
The label lane is a fixed 120px, not max-content. A lane that sizes to its content steps the left edge of every row in a list, so override the width on the form rather than on one field.