Form is a group of related input controls that allows users to provide data or configure options.

busy

readOnly

() => {
  const [value, setValue] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(false);
  const { addSnackbar } = useSnackbar();
  const responseRef = useRef(true);

  const onSubmit = useCallback((e: FormEvent) => {
    e.preventDefault();

    const submit = async () => {
      await new Promise((r) => {
        window.setTimeout(r, 2000);
      });

      setBusy(false);

      if (responseRef.current) {
        addSnackbar({ message: 'Error message', variant: 'danger' });
        setError(true);
      } else {
        addSnackbar({ message: 'Success message', variant: 'success' });
      }

      responseRef.current = !responseRef.current;
    };

    setError(false);
    setBusy(true);
    submit();
  }, []);

  const errorText = error ? 'Error text' : undefined;
  const mockProps = { value, onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value), error: errorText };

  return (
    <Form busy={busy} onSubmit={onSubmit} maxWidth={600}>
      <Form.Fieldset>
        <Input label="Label" placeholder="Placeholder" description="Hint" {...mockProps} />

        <Form.Columns>
          <Input label="Input" placeholder="Placeholder" description="Hint" {...mockProps} />
          <Input label="Input" placeholder="Placeholder" description="Hint" {...mockProps} />
        </Form.Columns>

        <Checkbox label="Comments" description="Get notified when someone posts a comment on a posting." error={errorText} />
      </Form.Fieldset>

      <Form.Fieldset>
        <Select items={[]} label="Secon section" description="Hint" placeholder="Placeholder" error={errorText} />

        <Radio.Group error={errorText}>
          <Radio value="one" label="First item" description="Get notified when someone posts a comment on a posting." />
          <Radio value="two" label="Second item" description="Get notified when someone posts a comment on a posting." />
        </Radio.Group>

        <Input label="Label" rows={5} placeholder="Placeholder" description="Hint" {...mockProps} />
      </Form.Fieldset>

      <Button.Group align="right">
        <Button loading={busy} type="submit" variant="primary">
          Save
        </Button>
        <Button disabled={busy} type="button" variant="secondary">
          Cancel
        </Button>
      </Button.Group>
    </Form>
  );
}

Form

() => {
  const [value, setValue] = useState('');
  const [open, setOpen] = useState<boolean>(false);
  const { addSnackbar } = useSnackbar();

  const onSubmit = useCallback((e: FormEvent) => {
    e.preventDefault();
    setOpen(false);
    addSnackbar({ message: 'Success message', variant: 'success' });
  }, []);

  const mockProps = { value, onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value) };

  return (
    <Dialog
      trigger={
        <Button type="button" data-testid="open-dialog" onClick={() => setOpen(true)}>
          Open Dialog
        </Button>
      }
      open={open}
      onClose={() => setOpen(false)}
      size="large"
    >
      <Form onSubmit={onSubmit}>
        <Dialog.Header>
          <Dialog.Header.Title title="Dialog title" />
          <Dialog.Header.Description>Dialof description</Dialog.Header.Description>
        </Dialog.Header>
        <Dialog.Content>
          <Form.Fieldset>
            <Input label="First section" placeholder="Placeholder" description="Hint" {...mockProps} />

            <Form.Columns>
              <Input label="Input" placeholder="Placeholder" description="Hint" {...mockProps} />
              <Input label="Input" placeholder="Placeholder" description="Hint" {...mockProps} />
            </Form.Columns>

            <Checkbox label="Comments" description="Get notified when someone posts a comment on a posting." />
          </Form.Fieldset>
        </Dialog.Content>
        <Dialog.Actions>
          <Button variant="primary" type="submit">
            Delete
          </Button>
          <Button variant="secondary" type="button" onClick={() => setOpen(false)}>
            Cancel
          </Button>
        </Dialog.Actions>
      </Form>
    </Dialog>
  );
}

If a single form is used in a \`Dialog\` or \`Drawer\` component, all content should be wrapped with the Form component


Name	Description	Default
busy	Form fields busy state	-
gap	Flexbox gap size	-
readOnly	Form fields read-only state	-

Form component

With Dialog