What UI Integrations Does Formily Support? Complete Guide to Component Library Adapters

Formily supports Ant Design (React), Element UI (Vue), and Alibaba Fusion (Next) through dedicated adapter packages, plus framework-agnostic React and Vue bindings that enable integration with any custom component library.

Formily is a powerful form solution from Alibaba that separates form state management from UI rendering. Understanding what UI integrations Formily supports is essential for developers choosing component libraries for their projects. The repository provides first-class adapters for the most popular React and Vue design systems, alongside flexible mapping utilities for custom integrations.

Supported UI Libraries and Framework Adapters

Ant Design (React)

The @formily/antd package provides complete bindings for Ant Design components. It exports FormProvider, Field, ArrayField, ObjectField, and VoidField components that wrap Ant Design controls.

Key implementation details from packages/antd/package.json show dependencies on both @formily/core and antd, confirming this is a bridge layer between Formily's state management and Ant Design's visual components.

import { createForm } from '@formily/core';
import { FormProvider, Field } from '@formily/react';
import { Input, Select } from 'antd';
import { mapProps } from '@formily/react';

const AntInput = (props) => <Input {...props} />;
const AntSelect = (props) => <Select {...props} />;

const form = createForm({ validateFirst: true });

export default function AntdForm() {
  return (
    <FormProvider form={form}>
      <Field
        name="username"
        component={AntInput}
        required
        decorator={[mapProps({ placeholder: 'Enter username' })]}
      />
      <Field
        name="role"
        component={AntSelect}
        decorator={[mapProps({ placeholder: 'Select role' })]}
        dataSource={[
          { label: 'Admin', value: 'admin' },
          { label: 'User', value: 'user' },