@canard/schema-form-antd-mobile-plugin

yarn add @canard/schema-form-antd-mobile-plugin

Ant Design Mobile UI plugin for @canard/schema-form. Provides 10 touch-optimized form input components built on antd-mobile ^5.0.0. Designed for mobile web applications — switches and sliders are preferred over desktop-style inputs.

Component Catalog

Preview

Full Catalog

See all 10 components in the Component Catalog page.

Installation

yarn add @canard/schema-form-antd-mobile-plugin antd-mobile@>=5.0.0

Peer Dependencies

yarn add dayjs@>=1 react@>=18 react-dom@>=18

Note: antd-mobile is a direct dependency of this plugin, not a peer dependency.

Quick Setup

import { registerPlugin } from '@canard/schema-form';
import { plugin } from '@canard/schema-form-antd-mobile-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"	—	Switch toggle with custom labels
FormTypeInputStringCheckbox	array	—	"checkbox"	items.enum	Checkbox group; items must be string schema
FormTypeInputStringSwitch	string	—	"switch"	2 values	Toggle between two enum values
FormTypeInputRadioGroup	string | number | integer	—	"radio" or "radiogroup"	required	Radio group
FormTypeInputArray	array	—	—	—	Dynamic list with add/remove
FormTypeInputSlider	number | integer	"slider"	—	—	Slider; also supports range slider for numeric-item arrays
FormTypeInputTextarea	string	"textarea" or formType "textarea"	—	—	Multi-line textarea
FormTypeInputString	string	—	—	—	Default text input (password supported via format: "password")
FormTypeInputNumber	number | integer	—	—	—	Stepper component
FormTypeInputBoolean	boolean	—	—	—	Checkbox with indeterminate state

Slider Range Support

FormTypeInputSlider activates for numeric range arrays:

// Single value slider
{ type: 'number', format: 'slider' }

// Range slider (array of two numbers)
{
  type: 'array',
  format: 'slider',          // or: items with numeric type + format:'slider'
  items: { type: 'number' }
}

Schema Extension Properties

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

Usage Example

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

const schema = {
  type: 'object',
  properties: {
    name:    { type: 'string' },
    count:   { type: 'integer' },
    active:  { type: 'boolean', formType: 'switch' },
    rating:  { type: 'number', format: 'slider', minimum: 0, maximum: 5 },
    tags:    {
      type: 'array',
      formType: 'checkbox',
      items: { type: 'string', enum: ['js', 'ts', 'react'] },
    },
  },
};

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

Context: Custom Switch Labels

// Pass checkboxLabels through context for BooleanSwitch
<Form
  jsonSchema={schema}
  context={{ checkboxLabels: { active: { true: 'On', false: 'Off' } } }}
/>

AI Agent Reference

AI Reference

Package: @canard/schema-form-antd-mobile-plugin v0.10.0 Purpose: Ant Design Mobile UI plugin — 10 touch-optimized form components for mobile web.

Exports

import { plugin } from '@canard/schema-form-antd-mobile-plugin';

Peer dependencies

antd-mobile@>=5.0.0 (direct dep), 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
RadioGroup	string|number + formType: "radio" + enum
Array	array (dynamic list)
Slider	number + format: "slider" (also supports range arrays)
Textarea	string + format: "textarea"
String	string (default)
Number	number|integer (Stepper component)
Boolean	boolean (default checkbox with indeterminate)

Context: custom switch labels

context={{ checkboxLabels: { fieldName: { true: 'On', false: 'Off' } } }}

Key differences from antd5/antd6

• No Date/Time/Month/URI pickers (mobile-specific)
• Number uses Stepper component (not text input)
• Slider supports range arrays: { type: 'array', format: 'slider', items: { type: 'number' } }