AddUserModal
Modal form for inviting a new user — captures email, role, and optional team assignment.
Modal form for inviting a new user — captures email, role, and optional team assignment.
import { AddUserModal } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
open | Required | boolean | — | — |
onClose | Required | VoidFunction | — | — |
roles | Required | RoleOption[] | — | — |
onSubmit | Required | (data: { name: string; email: string; role: string; }) => Promise<void> | — | — |
isSubmitting | Optional | boolean | undefined | — | — |
Usage
Modal form for inviting a new user to the system. Captures name, email address, and role assignment. Uses React Hook Form + Zod validation; submission is async to allow the caller to integrate with any API layer.
Notes
- The form resets automatically after a successful submission.
rolesmust be populated before opening the modal — an empty list will leave the role select empty with no options.- Closing via the backdrop is disabled (
closeOnClickOutside={false}) to prevent accidental dismissal mid-form.
Example
/** * Runnable example for AddUserModal. */import { AddUserModal } from '@tetherto/mdk-react-devkit'const mockRoles = [ { value: 'admin', label: 'Admin' }, { value: 'operator', label: 'Operator' }, { value: 'viewer', label: 'Viewer' },]export const AddUserModalExample = () => ( <div className="mdk-example-row"> <AddUserModal open={true} onClose={() => { console.warn('modal closed') }} roles={mockRoles} onSubmit={async (data) => { console.warn('create user', data) }} /> </div>)