Form Fields

import { useForm } from '@tanstack/react-form';
import { DynamicFormField } from '@docyrus/ui/components/form-fields';
import type { IField, EnumOption } from '@docyrus/ui/components/form-fields';

const fields: IField[] = [
  { id: '1', name: 'Full Name', slug: 'full_name', type: 'field-text' },
  { id: '2', name: 'Priority', slug: 'priority', type: 'field-select' },
  { id: '3', name: 'Active', slug: 'is_active', type: 'field-switch' },
];

const enumOptions: EnumOption[] = [
  { id: 'low', name: 'Low', color: '#22c55e' },
  { id: 'medium', name: 'Medium', color: '#f59e0b' },
  { id: 'high', name: 'High', color: '#ef4444' },
];

function MyForm() {
  const form = useForm({
    defaultValues: { full_name: '', priority: '', is_active: false },
    onSubmit: ({ value }) => console.log(value),
  });

  return (
    <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>
      {fields.map((field) => (
        <DynamicFormField
          key={field.id}
          field={field}
          form={form}
          enumOptions={field.type === 'field-select' ? enumOptions : undefined}
        />
      ))}
    </form>
  );
}

import { TextFormField } from '@docyrus/ui/components/form-fields/text-form-field';
import { SelectFormField } from '@docyrus/ui/components/form-fields/select-form-field';
import { SwitchFormField } from '@docyrus/ui/components/form-fields/switch-form-field';

<DynamicFormField
  field={fieldConfig}
  form={form}
  enumOptions={options}
  required
  disabled={false}
  className="my-field"
/>

import { DocEditorFormField } from '@docyrus/ui/components/form-fields/doc-editor-form-field';
import type { DocEditorPreset } from '@docyrus/ui/components/form-fields/doc-editor-form-field';

<DocEditorFormField field={fieldConfig} form={form} preset="rich" />

import { HtmlEditorFormField } from '@docyrus/ui/components/form-fields/html-editor-form-field';

<HtmlEditorFormField field={fieldConfig} form={form} preset="rich" />

import { CodeEditorFormField } from '@docyrus/ui/components/form-fields/code-editor-form-field';

<CodeEditorFormField field={fieldConfig} form={form} language="python" />

import { SchemaRepeaterFormField } from '@docyrus/ui/components/form-fields/schema-repeater-form-field';

<SchemaRepeaterFormField
  field={fieldConfig}
  form={form}
  schema={[
    { id: '1', name: 'Name', slug: 'name', type: 'field-text' },
    { id: '2', name: 'Role', slug: 'role', type: 'field-select' }
  ]}
  schemaEnumOptions={{ role: [{ id: 'admin', name: 'Admin' }, { id: 'editor', name: 'Editor' }] }}
/>

<SchemaRepeaterFormField field={fieldConfig} form={form} />

import { FieldMappingFormField } from '@docyrus/ui/components/form-fields/field-mapping-form-field';
import type { AvailableField } from '@docyrus/ui/components/form-fields/field-mapping-form-field';

const availableFields: AvailableField[] = [
  { name: 'user.name', label: 'User Name', type: 'text' },
  { name: 'user.email', label: 'User Email', type: 'email' },
  { name: 'project.title', label: 'Project Title', type: 'text' }
];

<FieldMappingFormField
  field={fieldConfig}
  form={form}
  availableFields={availableFields}>
  <TextFormField field={fieldConfig} form={form} />
</FieldMappingFormField>

import { CheckboxGroupFormField } from '@docyrus/ui/components/form-fields/checkbox-group-form-field';

<CheckboxGroupFormField
  field={fieldConfig}
  form={form}
  enumOptions={DEPARTMENT_OPTIONS}
  variant="card"
  columnCount={2}
/>