Overview
Dashforge is a React form framework built on MUI and React Hook Form. It eliminates integration boilerplate through form-aware components that handle registration, validation, and error display automatically.
What it looks like
A form with validation and conditional fields
import { DashForm } from '@dashforge/forms';
import { TextField, Select } from '@dashforge/ui';
function ContactForm() {
return (
<DashForm
defaultValues={{ method: '', email: '', phone: '' }}
onSubmit={(data) => console.log(data)}
>
<Select
name="method"
label="Contact Method"
options={[
{ value: 'email', label: 'Email' },
{ value: 'phone', label: 'Phone' },
]}
rules={{ required: 'Choose a method' }}
/>
{/* Appears only when email is selected */}
<TextField
name="email"
label="Email Address"
type="email"
visibleWhen={(form) =>
form.getNode('method')?.value === 'email'
}
rules={{ required: 'Email required' }}
/>
{/* Appears only when phone is selected */}
<TextField
name="phone"
label="Phone Number"
visibleWhen={(form) =>
form.getNode('method')?.value === 'phone'
}
rules={{ required: 'Phone required' }}
/>
</DashForm>
);
}
// No Controller wrappers
// No watch() hooks
// No manual error wiring
// Validation runs automatically
// Errors show when touched or submittedWhat Dashforge gives you
No form integration boilerplate
Components self-register with React Hook Form. No Controller wrappers, no manual error wiring, no watch() for reactive values.
Declarative conditional fields
Use visibleWhen prop instead of conditional JSX. Fields show/hide based on form state without manual orchestration.
Smart error handling
Errors display only after touch or submit (Form Closure v1). Validation rules use React Hook Form API directly.
Built on Material-UI
Dashforge extends MUI components with form integration rather than replacing them. You keep MUI's design system, accessibility, and ecosystem.
- All MUI props still work (sx, variant, size, etc.)
- MUI theming system fully compatible
- Dashforge adds: automatic form registration, validation handling, conditional visibility