@canard/schema-form-mui-plugin

yarn add @canard/schema-form-mui-plugin

Material UI v7 plugin for @canard/schema-form. Provides 15 form input components built on @mui/material ^7.0.0 with MUI X date/time pickers. Supports MUI's size, variant, and fullWidth context options.

Component Catalog

Preview

Full Catalog

See all 15 components in the Component Catalog page.

Installation

yarn add @canard/schema-form-mui-plugin

Peer Dependencies

yarn add @mui/material@>=7.0.0 @mui/x-date-pickers@>=8.0.0 \
         @mui/icons-material@>=7.0.0 \
         @emotion/react@>=11.0.0 @emotion/styled@>=11.0.0 \
         dayjs@>=1 react@>=18 react-dom@>=18

Quick Setup

import { registerPlugin } from '@canard/schema-form';
import { plugin } from '@canard/schema-form-mui-plugin';

registerPlugin(plugin);

Component Mapping

Components are selected automatically based on JSON Schema properties. Priority order matches the list below (top = highest priority).

Component	type	format	formType	enum	Notes
FormTypeInputBooleanSwitch	boolean	—	"switch"	—	MUI Switch
FormTypeInputStringCheckbox	array	—	"checkbox"	items.enum	MUI Checkbox group; items must be string schema
FormTypeInputStringSwitch	string	—	"switch"	2 values	Toggle between two enum values
FormTypeInputUri	string	"uri" or formType "uri"	—	—	URI input with protocol dropdown
FormTypeInputMonth	string	"month"	—	—	MUI X MonthPicker
FormTypeInputDate	string	"date"	—	—	MUI X DatePicker
FormTypeInputTime	string	"time"	—	—	MUI X TimePicker (HH:mm:00Z format)
FormTypeInputRadioGroup	string | number | integer	—	"radio" or "radiogroup"	required	MUI RadioGroup
FormTypeInputStringEnum	string	—	—	required	MUI Select dropdown
FormTypeInputArray	array	—	—	—	Dynamic list with add/remove
FormTypeInputSlider	number | integer	—	"slider"	—	MUI Slider
FormTypeInputTextarea	string	"textarea" or formType "textarea"	—	—	MUI TextField multiline
FormTypeInputString	string	—	—	—	MUI TextField (password via format:"password")
FormTypeInputNumber	number | integer	—	—	—	MUI TextField type=number
FormTypeInputBoolean	boolean	—	—	—	MUI Checkbox with indeterminate

Schema Extension Properties

{
  formType?: 'switch' | 'radio' | 'radiogroup' | 'checkbox' | 'slider' | 'textarea' | 'uri',
  format?:   'date' | 'time' | 'month' | 'password' | 'uri' | 'textarea',
}

Usage Example

import { Form } from '@canard/schema-form';

const schema = {
  type: 'object',
  properties: {
    name:     { type: 'string' },
    age:      { type: 'integer' },
    active:   { type: 'boolean', formType: 'switch' },
    role:     { type: 'string', enum: ['admin', 'user', 'guest'] },
    birthday: { type: 'string', format: 'date' },
    bio:      { type: 'string', format: 'textarea' },
    score:    { type: 'number', formType: 'slider', minimum: 0, maximum: 100 },
  },
};

<Form jsonSchema={schema} onChange={setValue} />

MUI Context

Pass MUI styling options through <Form context={...}>:

type MuiContext = {
  size?:      'small' | 'medium';
  variant?:   'outlined' | 'filled' | 'standard';
  fullWidth?: boolean;
};

<Form
  jsonSchema={schema}
  context={{ size: 'small', variant: 'outlined', fullWidth: true }}
  onChange={setValue}
/>

Date/Time Picker Setup

MUI X date pickers require a LocalizationProvider. Wrap your app:

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Form jsonSchema={schema} onChange={setValue} />
</LocalizationProvider>

AI Agent Reference

AI Reference

Package: @canard/schema-form-mui-plugin v0.10.0 Purpose: Material UI v7 plugin — 15 form input components with MUI X date/time pickers.

Exports

import { plugin } from '@canard/schema-form-mui-plugin';
import type { MuiContext } from '@canard/schema-form-mui-plugin';

Peer dependencies

@mui/material@>=7, @mui/x-date-pickers@>=8, @mui/icons-material@>=7, @emotion/react@>=11, @emotion/styled@>=11, dayjs@>=1, react@>=18

Component mapping (priority order, high → low)

Component	Trigger
BooleanSwitch	boolean + formType: "switch"
StringCheckbox	array + formType: "checkbox" + items.enum
StringSwitch	string + formType: "switch" + 2 enum values
Uri	string + format: "uri"
Month / Date / Time	string + format: "month"/"date"/"time" (MUI X pickers)
RadioGroup	string|number + formType: "radio" + enum
StringEnum	string + enum (MUI Select)
Array	array (dynamic list)
Slider	number + formType: "slider"
Textarea	string + format: "textarea" (multiline TextField)
String	string (TextField, password via format: "password")
Number	number|integer (TextField type=number)
Boolean	boolean (Checkbox with indeterminate)

Context type

type MuiContext = { size?: 'small' | 'medium'; variant?: 'outlined' | 'filled' | 'standard'; fullWidth?: boolean };

Required setup for date/time pickers

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
<LocalizationProvider dateAdapter={AdapterDayjs}><Form ... /></LocalizationProvider>