Browse docs
Browse docs
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.
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 submittedNo 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.
Dashforge extends MUI components with form integration rather than replacing them. You keep MUI's design system, accessibility, and ecosystem.
sx, variant, size, etc.)