Components

Form

A form that checks its fields on submit, lists problems in a linked summary and moves focus to it.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

Try submitting empty: the submit stops, the summary appears and focus moves to it. Links lead to the fields.

import { Button, Form, TextInput, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Form className="max-w-md">
        <TextInput label="Full name" name="name" required autoComplete="name" />
        <TextInput label="Email" name="email" type="email" required autoComplete="email" />
        <Button type="submit" className="self-start">
          Send
        </Button>
      </Form>
    </Provider>
  );
}

Without summary

With summary={false}, focus goes straight to the first invalid field; for short forms.

import { Button, Form, TextInput, Provider } from '@bigbang/ui';

export default function WithoutSummary() {
  return (
    <Provider locale="en-GB">
      <Form className="max-w-md" summary={false}>
        <TextInput label="Full name" name="name" required autoComplete="name" />
        <TextInput label="Email" name="email" type="email" required autoComplete="email" />
        <Button type="submit" className="self-start">
          Send
        </Button>
      </Form>
    </Provider>
  );
}

Server errors

errors that arrive after a submit join the summary, and focus moves to it again.

import { Button, Form, TextInput, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function ServerErrors() {
  const [errors, setErrors] = useState<Record<string, string>>({});
  return (
    <Provider locale="en-GB">
      <Form className="max-w-md" errors={errors} onSubmit={() => setErrors({ team: 'This team name is taken.' })}>
        <TextInput
          label="Team name"
          name="team"
          defaultValue="Kuzey"
          {...(errors['team'] ? { error: errors['team'] } : {})}
          onValueChange={() => setErrors({})}
        />
        <Button type="submit" className="self-start">
          Send
        </Button>
      </Form>
    </Provider>
  );
}

Light and dark mode

The summary uses the danger status background and border.

import { Button, Form, TextInput, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Form className="max-w-md">
        <TextInput label="Full name" name="name" required autoComplete="name" />
        <TextInput label="Email" name="email" type="email" required autoComplete="email" />
        <Button type="submit" className="self-start">
          Send
        </Button>
      </Form>
    </Provider>
  );
}