# Create Record Dialog
URL: /docs/web/components/create-record-dialog

Create Record Dialog component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import {
  CreateRecordDialog,
  type SelectorFieldConfig,
  type MentionTriggerConfig,
  type AiAction
} from '@docyrus/ui/components/create-record-dialog';
import {
  AtSignIcon, CalendarIcon, FolderIcon,
  GlobeIcon, HashIcon, SparklesIcon,
  UserIcon
} from 'lucide-react';

import { Button } from '@docyrus/ui/primitives/ui/button';

// ─── Sample Data ─────────────────────────────────────────────

const PROJECTS = [
  { id: 'p1', label: 'Marketing Campaign', color: '#3b82f6' },
  { id: 'p2', label: 'Product Launch', color: '#8b5cf6' },
  { id: 'p3', label: 'Engineering Sprint', color: '#10b981' },
  { id: 'p4', label: 'Design System', color: '#f59e0b' }
];

const SECTIONS: Record<string, Array<{ id: string; label: string }>> = {
  p1: [{ id: 's1', label: 'Social Media' }, { id: 's2', label: 'Email Campaigns' }],
  p2: [{ id: 's4', label: 'Beta Testing' }, { id: 's5', label: 'Launch Prep' }],
  p3: [{ id: 's6', label: 'Sprint 14' }, { id: 's7', label: 'Sprint 15' }],
  p4: [{ id: 's8', label: 'Components' }, { id: 's9', label: 'Tokens' }]
};

const USERS = [
  { id: 'u1', label: 'Alice Johnson' },
  { id: 'u2', label: 'Bob Smith' },
  { id: 'u3', label: 'Carol Williams' },
  { id: 'u4', label: 'David Brown' },
  { id: 'u5', label: 'Eve Davis' }
];

const PRIORITIES = [
  { id: 'low', label: 'Low', color: '#94a3b8' },
  { id: 'medium', label: 'Medium', color: '#f59e0b' },
  { id: 'high', label: 'High', color: '#ef4444' },
  { id: 'urgent', label: 'Urgent', color: '#dc2626' }
];

export function CreateRecordDialogDemo() {
  const [projectId, setProjectId] = useState<string | null>(null);

  const headerFields: SelectorFieldConfig[] = [
    {
      key: 'project',
      label: 'Project',
      placeholder: 'Select project',
      options: PROJECTS,
      value: projectId,
      clearsFields: ['section'],
      onChange: val => setProjectId(val)
    }
  ];

  if (projectId) {
    headerFields.push({
      key: 'section',
      label: 'Section',
      placeholder: 'Section',
      options: SECTIONS[projectId] ?? []
    });
  }

  const userTrigger: MentionTriggerConfig = {
    trigger: '@',
    options: USERS.map(u => ({
      id: u.id,
      label: u.label,
      icon: 
    })),
    searchPlaceholder: 'Search users...',
    emptyText: 'No users found.'
  };

  const projectTrigger: MentionTriggerConfig = {
    trigger: '#',
    options: PROJECTS.map(p => ({
      id: p.id,
      label: p.label,
      icon: 
    })),
    searchPlaceholder: 'Search projects...',
    emptyText: 'No projects found.'
  };

  const aiActions: AiAction[] = [
    {
      id: 'rephrase',
      label: 'Rephrase',
      icon: ,
      onAction: () => {}
    },
    {
      id: 'translate',
      label: 'Translate',
      icon: ,
      onAction: () => {}
    }
  ];

  return (
    }
      headerLabel="Create task on"
      headerFields={headerFields}
      subjectPlaceholder="Task name"
      descriptionPlaceholder="Add task description..."
      footerFields={[
        {
          key: 'dueDate',
          label: 'Due date',
          placeholder: 'Due date',
          icon: ,
          options: [{ id: 'today', label: 'Today' }, { id: 'tomorrow', label: 'Tomorrow' }, { id: 'next_week', label: 'Next week' }]
        },
        {
          key: 'assignee',
          label: 'Assignee',
          placeholder: 'Assignee',
          icon: ,
          options: USERS,
          searchPlaceholder: 'Search users...'
        },
        {
          key: 'priority',
          label: 'Priority',
          placeholder: 'Priority',
          icon: <span className="text-xs">!</span>,
          options: PRIORITIES
        }
      ]}
      footerToggles={[{ key: 'backlog', label: 'Backlog' }]}
      mentionTriggers={[userTrigger, projectTrigger]}
      aiActions={aiActions}
      enableCreateMore
      onSubmit={(data) => {
        console.info('Submitted:', data);

        return new Promise<void>(resolve => setTimeout(resolve, 800));
      }}>
      
    
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-create-record-dialog
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [radix-ui](https://www.npmjs.com/package/radix-ui)
- [@types/react](https://www.npmjs.com/package/@types/react)
- [@types/react-dom](https://www.npmjs.com/package/@types/react-dom)

## Usage

```tsx
import {
  CreateRecordDialog
} from "@docyrus/ui/components/create-record-dialog";

<CreateRecordDialog
  open
  onOpenChange={() => {}}
  headerIcon={...}
  headerLabel="..."
  headerFields={SelectorFieldConfig[]}
  subjectPlaceholder="..."
  descriptionPlaceholder="..."
  descriptionExpanded
  footerFields={SelectorFieldConfig[]}
  footerToggles={FooterToggleConfig[]}
  mentionTriggers={MentionTriggerConfig[]}
  onMentionSelect={() => {}}
  aiActions={AiAction[]}
  enableCreateMore
  createMoreResetKeys={string[]}
  onSubmit={() => {}}
  isPending
  saveLabel="..."
  cancelLabel="..."
  createMoreLabel="..."
  addDescriptionLabel="..."
  dialogTitle="..."
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `headerIcon` | `ReactNode` | — |
| `headerLabel` | `string` | — |
| `headerFields` | `SelectorFieldConfig[]` | — |
| `subjectPlaceholder` | `string` | — |
| `descriptionPlaceholder` | `string` | — |
| `descriptionExpanded` | `boolean` | — |
| `footerFields` | `SelectorFieldConfig[]` | — |
| `footerToggles` | `FooterToggleConfig[]` | — |
| `mentionTriggers` | `MentionTriggerConfig[]` | — |
| `onMentionSelect` | `(selection: MentionSelection) => void` | — |
| `aiActions` | `AiAction[]` | — |
| `enableCreateMore` | `boolean` | — |
| `createMoreResetKeys` | `string[]` | — |
| `onSubmit` | `(data: CreateRecordFormData) => void \| Promise<void>` | — |
| `isPending` | `boolean` | — |
| `saveLabel` | `string` | — |
| `cancelLabel` | `string` | — |
| `createMoreLabel` | `string` | — |
| `addDescriptionLabel` | `string` | — |
| `dialogTitle` | `string` | — |
| `className` | `string` | — |