react-typed-forms-mui

What problem does it solve?

This Skill provides a seamless bridge between Material-UI components and the typed form state management offered by @react-typed-forms/core. It enables React developers to build robust, accessible forms with MUI UI elements that stay in sync with form data, validation, and state.

Core Features & Use Cases

• FTextField binding: Wraps Material-UI TextField components to bind directly to typed form state with automatic value handling and validation display.
• MUI Schema Renderers: Pre-built renderers for @react-typed-forms/schemas that render forms using Material-UI components.
• Form Component Wrappers: MUI-specific wrappers for common controls (text fields, selects, checkboxes) that integrate with the form control state.
• Use Case: Ideal for building admin dashboards, sign-up/login forms, or settings panels that require polished Material-UI interfaces with robust form state.

Quick Start

Install the library via npm: npm install @react-typed-forms/core @react-typed-forms/mui @mui/material. Then create a minimal React component using useControl to create form state and render FTextField bound to fields. Run your application to see the Material-UI inputs stay in sync with the typed form data and validation.