Controls

Field

A label, a control and a hint make a field; Fieldset and Form group fields into a form.

import { Field, Fieldset, Legend, Form } from '@iffday/ui';

Field

Field stacks a label, a control and a hint: the label is 13px and medium weight, the hint is secondary text. Base UI ties the label to the control, so a screen reader reads the label as the control’s name.

Display name

Profile handle

Use 1–30 letters, numbers, underscores or periods. Your preferred casing is retained. Do not start or end with a period, or use consecutive periods. Other users may reuse a previous handle.

Form

Form checks constraints such as required and pattern before it submits, and the browser points at the field that fails. Group related fields in a Fieldset named by a Legend. After a save, tell the reader with a toast: Save in the example below shows Saved.

import { useT } from '@iffday/i18n';
import { Button, Field, Fieldset, Form, Input, Legend, Textarea } from '@iffday/ui';
import { useApp } from '@iffday/web/src/state';

export default function Example() {
  const t = useT();
  const { notify } = useApp();
  return (
    <Form
      style={{ width: 'min(100%, 420px)' }}
      onSubmit={(event) => {
        event.preventDefault();
        notify(t('common.saved'));
      }}
    >
      <Fieldset>
        <Legend>{t('nav.myProfile')}</Legend>
        <Field label={t('account.settings.displayName')}>
          <Input name="name" required defaultValue="Lin" />
        </Field>
        <Field label={t('account.profile.profileHandle')}>
          <Input name="handle" required pattern="[A-Za-z0-9_.]{1,30}" defaultValue="lin" />
        </Field>
        <Field label={t('account.settings.bio')}>
          <Textarea name="bio" rows={3} />
        </Field>
      </Fieldset>
      <div style={{ display: 'flex', gap: 8 }}>
        <Button className="button primary">{t('common.save')}</Button>
        <Button type="reset" className="button neutral">
          {t('common.cancel')}
        </Button>
      </div>
    </Form>
  );
}

Props

Field

packages/ui/src/layout.tsx:5

Prop	Type	Default
`label*`	`string`
`children*`	`ReactNode`
`hint`	`string`

Fieldset

packages/ui/src/controls.tsx:45

Exports BaseFieldset.Root as it is, with Base UI’s props (see the Base UI documentation).

Legend

packages/ui/src/controls.tsx:46

Other props go to ComponentProps<'legend'>.