Диалог с формой

FormDialog оборачивает Dialog: форма занимает прокручиваемое тело, а кнопка отправки в закреплённом футере связана с ней через нативный атрибут form, поэтому отправка по Enter и встроенная валидация работают как в обычной форме. Фокус по умолчанию попадает на первое поле — в отличие от ConfirmDialog, который для безопасности фокусирует кнопку отмены.

Пример

Интерактивный пример

Использование

Импортируйте компонент из публичной точки входа пакета.

"use client";

import { FormDialog, Input, Button } from "denjs-ui";
import { useState } from "react";

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Create project</Button>
      <FormDialog
        open={open}
        onOpenChange={setOpen}
        title="New project"
        submitLabel="Create"
        cancelLabel="Cancel"
        onSubmit={() => setOpen(false)}
      >
        <label htmlFor="project-name">Project name</label>
        <Input id="project-name" required />
      </FormDialog>
    </>
  );
}