@mui-forms-adapters/native

Native HTML adapter for MUI Forms. This package provides a set of lightweight field components built with native HTML elements and minimal dependencies, perfect for applications that need a simple, accessible form solution without external UI libraries.

Features

• 🎯 Lightweight native HTML implementation
• 🚀 Zero external UI library dependencies
• ♿ Accessible and semantic HTML
• 🔄 Seamless integration with MUI Forms
• ⚛️ React 16.8+ compatible
• 📝 Built-in form validation support
• 🎨 Easily customizable with CSS
• 📦 Small bundle size

Installation

pnpm install @mui-forms-adapters/native

Or with npm:

npm install @mui-forms-adapters/native

Peer Dependencies

• React 16.8+
• MUI Forms 3.0.1-beta-8+

Supported Field Types

| Field Type | Component | Description | |-----------|-----------|-------------| | text | InputField | Text input field | | email | InputField | Email input with validation | | password | InputField | Password input (masked) | | search | InputField | Search input field | | number | InputField | Number input field | | date | InputField | Date input field | | select | SelectField | Dropdown selection |

Usage

Basic Setup

import { NativeAdapter } from '@mui-forms-adapters/native';
import MuiForms from 'mui-forms';

const MyForm = () => {
  return (
    <MuiForms
      adapter={NativeAdapter}
      schema={schema}
      onSubmit={(data) => {
        // save data
      }}
    />
  );
};

Form Configuration

const formConfig = {
  className: 'my-form',
  variants: {
    // Custom styling variants for form elements
  }
};

Styling

All components use native HTML elements and can be styled with standard CSS or CSS-in-JS solutions:

.form-field {
  margin-bottom: 1rem;
}

.form-field input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-field input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

Development

Build

pnpm build

Watch Mode

pnpm dev

Lint

pnpm lint

License

MIT