Forms

Field

Label, hint and error for one control. The control inside picks up its id, aria-describedby, aria-invalid and required automatically.

import { Field } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Label, hint and error

Full name

GitHub username

Your resume is read from a gist named resume.json.

Enter an email address like name@example.com.

Show code

field/basic.tsx

import { Field, Input, Stack } from '@jsonresume/ui';
import * as styles from './basic.css';

export default function FieldBasic() {
  return (
    <Stack gap={5} className={styles.root}>
      <Field label="Full name" required>
        <Input autoComplete="name" />
      </Field>
      <Field
        label="GitHub username"
        hint="Your resume is read from a gist named resume.json."
      >
        <Input placeholder="thomasdavis" />
      </Field>
      <Field
        label="Email"
        error="Enter an email address like name@example.com."
      >
        <Input type="email" defaultValue="thomas@" />
      </Field>
    </Stack>
  );
}

field/basic.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 22rem)' });

A complete form

Show code

field/form.tsx

import {
  Button,
  Checkbox,
  Field,
  Input,
  Select,
  Stack,
  Textarea,
} from '@jsonresume/ui';
import * as styles from './form.css';

// One column, labels above controls, one primary action at the end.
export default function FieldForm() {
  return (
    <form className={styles.root}>
      <Stack gap={5}>
        <Field label="Full name" required>
          <Input autoComplete="name" />
        </Field>
        <Field label="Email" hint="Shown on your resume only if you choose.">
          <Input type="email" autoComplete="email" />
        </Field>
        <Field label="Theme">
          <Select defaultValue="pro">
            <option value="pro">Pro</option>
            <option value="even">Even</option>
            <option value="elegant">Elegant</option>
          </Select>
        </Field>
        <Field label="Summary">
          <Textarea rows={4} />
        </Field>
        <Checkbox label="Make my resume public" defaultChecked />
        <Stack direction="row" gap={2} justify="end">
          <Button variant="ghost">Cancel</Button>
          <Button variant="primary" type="submit">
            Save resume
          </Button>
        </Stack>
      </Stack>
    </form>
  );
}

field/form.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 26rem)' });

Usage

Do

Always show a visible label.
Write errors that say how to fix the problem.
Put hints before the control so they are read first.

Don’t

Use placeholder text as the label.
Show errors before someone has finished typing.

Accessibility

The label is a real <label for>.
Hint and error are linked with aria-describedby; errors set aria-invalid.
Required fields set the required attribute; the asterisk is hidden from screen readers.

Props

<Field>

Also accepts the attributes of the element Field renders.
Prop	Type	Default	Description
label required	ReactNode	–
error	ReactNode	–	Error message; marks the control invalid.
hint	ReactNode	–	Help text shown under the label.
id	string	–	Id for the control. Generated when omitted.
required	boolean	false