0
# Forms
1

2
Comprehensive form system with Material UI styling for creating and editing data records in react-admin applications.
3

4
## Capabilities
5

6
### SimpleForm Component
7

8
Basic form layout component with automatic validation and submission handling.
9

10
```typescript { .api }
11
/**
12
 * Basic form layout component with automatic validation and submission
13
 * @param props - SimpleForm configuration props
14
 * @returns Form component with validation and Material UI styling
15
 */
16
function SimpleForm(props: SimpleFormProps): ReactElement;
17

18
interface SimpleFormProps {
19
  /** Custom toolbar component for form actions */
20
  toolbar?: ComponentType<ToolbarProps> | false;
21
  /** Child input components */
22
  children?: ReactNode;
23
  /** Default values for form fields */
24
  defaultValues?: Record<string, any>;
25
  /** Form validation function */
26
  validate?: (values: Record<string, any>) => Record<string, any>;
27
  /** Form submission handler */
28
  save?: (data: any, redirectTo?: string) => void;
29
  /** Redirect location after save */
30
  redirect?: string | false;
31
  /** Transform function for form data before save */
32
  transform?: (data: any) => any;
33
  /** Form margin setting */
34
  margin?: 'none' | 'normal' | 'dense';
35
  /** Form variant */
36
  variant?: 'standard' | 'outlined' | 'filled';
37
}
38
```
39

40
**Usage Examples:**
41

42
```typescript
43
import { SimpleForm, TextInput, NumberInput, SaveButton } from "ra-ui-materialui";
44

45
// Basic form
46
const UserForm = () => (
47
  <SimpleForm>
48
    <TextInput source="name" validate={required()} />
49
    <TextInput source="email" validate={[required(), email()]} />
50
    <NumberInput source="age" />
51
  </SimpleForm>
52
);
53

54
// Custom form with toolbar
55
const CustomForm = () => (
56
  <SimpleForm 
57
    defaultValues={{ status: 'active' }}
58
    toolbar={<CustomToolbar />}
59
    margin="dense"
60
  >
61
    <TextInput source="title" />
62
    <TextInput source="description" multiline />
63
  </SimpleForm>
64
);
65
```
66

67
### TabbedForm Component
68

69
Tabbed form layout component for organizing form fields into separate tabs.
70

71
```typescript { .api }
72
/**
73
 * Tabbed form layout component for organizing fields into separate tabs
74
 * @param props - TabbedForm configuration props
75
 * @returns Form with tab navigation and organized field groups
76
 */
77
function TabbedForm(props: TabbedFormProps): ReactElement;
78

79
interface TabbedFormProps {
80
  /** Custom toolbar component */
81
  toolbar?: ComponentType<ToolbarProps> | false;
82
  /** Child FormTab components */
83
  children?: ReactNode;
84
  /** Default values for form fields */
85
  defaultValues?: Record<string, any>;
86
  /** Form validation function */
87
  validate?: (values: Record<string, any>) => Record<string, any>;
88
  /** Form submission handler */
89
  save?: (data: any, redirectTo?: string) => void;
90
  /** Redirect location after save */
91
  redirect?: string | false;
92
  /** Transform function for form data */
93
  transform?: (data: any) => any;
94
  /** Tab indicator color */
95
  indicatorColor?: 'primary' | 'secondary';
96
  /** Tab text color */
97
  textColor?: 'primary' | 'secondary' | 'inherit';
98
}
99
```
100

101
### FormTab Component
102

103
Individual tab component for use within TabbedForm.
104

105
```typescript { .api }
106
/**
107
 * Individual tab component for use within TabbedForm
108
 * @param props - FormTab configuration props
109
 * @returns Tab panel with form fields
110
 */
111
function FormTab(props: FormTabProps): ReactElement;
112

113
interface FormTabProps {
114
  /** Tab label text */
115
  label: string;
116
  /** Tab icon component */
117
  icon?: ReactElement;
118
  /** Child input components for this tab */
119
  children?: ReactNode;
120
  /** Tab value for controlled tabs */
121
  value?: string | number;
122
  /** Whether tab is disabled */
123
  disabled?: boolean;
124
  /** Path for tab content (used with nested resources) */
125
  path?: string;
126
}
127
```
128

129
**Usage Examples:**
130

131
```typescript
132
import { TabbedForm, FormTab, TextInput, DateInput } from "ra-ui-materialui";
133
import { Person, Work } from "@mui/icons-material";
134

135
const UserTabbedForm = () => (
136
  <TabbedForm>
137
    <FormTab label="Personal" icon={<Person />}>
138
      <TextInput source="firstName" />
139
      <TextInput source="lastName" />
140
      <DateInput source="birthDate" />
141
    </FormTab>
142
    <FormTab label="Professional" icon={<Work />}>
143
      <TextInput source="company" />
144
      <TextInput source="position" />
145
      <NumberInput source="salary" />
146
    </FormTab>
147
  </TabbedForm>
148
);
149
```
150

151
### Toolbar Component
152

153
Form toolbar component containing action buttons like Save and Delete.
154

155
```typescript { .api }
156
/**
157
 * Form toolbar component containing action buttons
158
 * @param props - Toolbar configuration props
159
 * @returns Toolbar with form action buttons
160
 */
161
function Toolbar(props: ToolbarProps): ReactElement;
162

163
interface ToolbarProps {
164
  /** Child button components */
165
  children?: ReactNode;
166
  /** Whether toolbar should take full width */
167
  width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
168
  /** Toolbar alignment */
169
  align?: 'left' | 'right' | 'center';
170
  /** Custom save button component */
171
  saveButton?: ReactElement;
172
  /** Custom delete button component */
173
  deleteButton?: ReactElement;
174
  /** Whether to show save button */
175
  showSaveButton?: boolean;
176
  /** Whether to show delete button */
177
  showDeleteButton?: boolean;
178
}
179
```
180

181
### Form Action Buttons
182

183
Standard action buttons for forms with Material UI styling.
184

185
```typescript { .api }
186
/**
187
 * Save button for forms with loading state and validation
188
 */
189
function SaveButton(props: SaveButtonProps): ReactElement;
190

191
/**
192
 * Delete button for forms with confirmation dialog
193
 */
194
function DeleteButton(props: DeleteButtonProps): ReactElement;
195

196
interface SaveButtonProps {
197
  /** Button label text */
198
  label?: string;
199
  /** Redirect location after save */
200
  redirect?: string | false;
201
  /** Whether button is disabled */
202
  disabled?: boolean;
203
  /** Button variant */
204
  variant?: 'text' | 'outlined' | 'contained';
205
  /** Button color */
206
  color?: 'primary' | 'secondary' | 'error';
207
  /** Transform function for save data */
208
  transform?: (data: any) => any;
209
  /** Click handler */
210
  onClick?: () => void;
211
  /** Button icon */
212
  icon?: ReactElement;
213
}
214

215
interface DeleteButtonProps {
216
  /** Button label text */
217
  label?: string;
218
  /** Redirect location after delete */
219
  redirect?: string;
220
  /** Whether button is disabled */
221
  disabled?: boolean;
222
  /** Confirmation message */
223
  confirmTitle?: string;
224
  /** Confirmation content */
225
  confirmContent?: string;
226
  /** Button color */
227
  color?: 'primary' | 'secondary' | 'error';
228
}
229
```
230

231
**Usage Examples:**
232

233
```typescript
234
import { Toolbar, SaveButton, DeleteButton } from "ra-ui-materialui";
235
import { Save, Delete } from "@mui/icons-material";
236

237
// Custom toolbar
238
const CustomToolbar = () => (
239
  <Toolbar>
240
    <SaveButton 
241
      label="Save Changes"
242
      icon={<Save />}
243
      redirect="list"
244
    />
245
    <DeleteButton 
246
      label="Remove"
247
      confirmTitle="Delete Confirmation"
248
      confirmContent="Are you sure you want to delete this item?"
249
    />
250
  </Toolbar>
251
);
252
```
253

254
## Form Hooks
255

256
### Form State Management
257

258
Hooks for accessing and managing form state within react-admin forms.
259

260
```typescript { .api }
261
/**
262
 * Hook for accessing form context and methods
263
 * @returns Form context with methods and state
264
 */
265
function useFormContext(): FormContext;
266

267
/**
268
 * Hook for accessing form state information
269
 * @returns Form state with validation and submission status
270
 */
271
function useFormState(): FormState;
272

273
interface FormContext {
274
  getValues: () => Record<string, any>;
275
  setValue: (name: string, value: any) => void;
276
  register: (name: string) => void;
277
  unregister: (name: string) => void;
278
  control: any;
279
  formState: FormState;
280
}
281

282
interface FormState {
283
  isDirty: boolean;
284
  isValid: boolean;
285
  isSubmitting: boolean;
286
  errors: Record<string, any>;
287
  touchedFields: Record<string, boolean>;
288
  dirtyFields: Record<string, boolean>;
289
}
290
```
291

292
**Usage Examples:**
293

294
```typescript
295
import { useFormContext, useFormState } from "ra-ui-materialui";
296

297
const FormStatus = () => {
298
  const { isValid, isDirty, errors } = useFormState();
299
  const { getValues } = useFormContext();
300
  
301
  return (
302
    <div>
303
      <p>Form Valid: {isValid ? 'Yes' : 'No'}</p>
304
      <p>Form Dirty: {isDirty ? 'Yes' : 'No'}</p>
305
      <p>Errors: {Object.keys(errors).length}</p>
306
    </div>
307
  );
308
};
309
```
310

311
## Types
312

313
```typescript { .api }
314
interface ValidationRule {
315
  required?: boolean | string;
316
  pattern?: RegExp | { value: RegExp; message: string };
317
  min?: number | { value: number; message: string };
318
  max?: number | { value: number; message: string };
319
  validate?: (value: any) => boolean | string;
320
}
321

322
interface FormTabsProps {
323
  children?: ReactNode;
324
  indicatorColor?: 'primary' | 'secondary';
325
  textColor?: 'primary' | 'secondary' | 'inherit';
326
  variant?: 'standard' | 'scrollable' | 'fullWidth';
327
}
328
```