Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

FormItem

A redesigned FormItem component. Compared with Element Plus FormItem, it supports more capabilities while remaining purely presentational, so it does not manage form state and is lighter and easier to customize.

This component has been refactored, so please refer to the updated documentation. Features inherited from Ant Design but not implemented by Element Plus have been removed. This package is primarily a Formily wrapper for Element Plus, so it should not try to align its design language with Ant Design. However, the original Formily layout configuration style is still preserved.

The inset prop has been removed.
The bordered prop has been removed.
Native Vue-inherited attributes such as class and style have been removed from the explicit API list.
Features implemented by Ant Design rather than Formily have been removed.

Note

Because this component mostly follows the styling and interactions of Element Plus FormItem, the previous shallow wrapper around ElFormItem has been removed.

Tip

Starting from 2.1.0, the Vue wrapper has been upgraded to @silver-formily/vue@2.2.1. This means you can use decoratorContent to insert content into FormItem. Although this is not an official Formily implementation and does not use Formily reactivity, it should be sufficient in most cases. See the example in the @silver-formily/vue documentation for details.

Common Props Example

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import {
  Cascader,
  DatePicker,
  FormItem,
  FormLayout,
  Input,
  InputNumber,
  Select,
  TimePicker,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { h } from 'vue'

function Title(props, { slots }) {
  return h('p', props, slots.default?.())
}
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'color',
            label: 'Color',
          },
          {
            value: 'typography',
            label: 'Typography',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'tag',
            label: 'Tag',
          },
          {
            value: 'progress',
            label: 'Progress',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu',
          },
          {
            value: 'tabs',
            label: 'Tabs',
          },
          {
            value: 'breadcrumb',
            label: 'Breadcrumb',
          },
          {
            value: 'dropdown',
            label: 'Dropdown',
          },
          {
            value: 'steps',
            label: 'Steps',
          },
        ],
      },
    ],
  },

]

const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
  components: {
    Title,
    FormItem,
    InputNumber,
    Input,
    Cascader,
    Select,
    DatePicker,
    FormLayout,
    TimePicker,
  },
})

const form = createForm()
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaVoidField x-component="Title" x-content="Display When Label Is Empty: " />
      <SchemaStringField
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
        }"
      />
      <SchemaStringField
        title=""
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
        }"
      />
      <SchemaVoidField x-component="Title" x-content="Colon: " />
      <SchemaStringField
        title="Default"
        x-decorator="FormItem"
        x-component="Input"
      />
      <SchemaStringField
        title="No Colon (colon=false)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          colon: false,
        }"
      />
      <SchemaVoidField x-component="Title" x-content="Fixed Width Settings: " />
      <SchemaStringField
        title="Fixed Label Width (labelWidth)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
        }"
      />
      <SchemaStringField
        title="Fixed Label Width (labelWidth) Overflow"
        description="Description text"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
          tooltip: 'Helpful tip',
        }"
      />
      <SchemaStringField
        title="Fixed Label Width (labelWidth) Wrapped Text"
        description="Description text"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
          labelWrap: true,
          tooltip: 'Helpful tip',
        }"
      />
      <SchemaStringField
        title="Fixed Content Width (wrapperWidth)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
          wrapperWidth: 300,
        }"
      />
      <SchemaVoidField x-component="Title" x-content="Alignment Settings:" />
      <SchemaStringField
        title="Left-aligned Label (labelAlign=left)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
          labelAlign: 'left',
        }"
      />
      <SchemaStringField
        title="Right-aligned Label (labelAlign=right, default)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
          labelAlign: 'right',
        }"
      />
      <SchemaStringField
        title="Left-aligned Content (wrapperAlign=left, default)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
          wrapperWidth: 240,
          wrapperAlign: 'left',
        }"
      />
      <SchemaStringField
        title="Right-aligned Content (wrapperAlign=right)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          labelWidth: 300,
          wrapperWidth: 240,
          wrapperAlign: 'right',
        }"
      />
      <SchemaStringField
        title="tooltip"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          tooltip: 'tooltip',
        }"
      />
      <SchemaStringField
        title="tooltip"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          tooltip: 'tooltip',
          tooltipLayout: 'text',
        }"
      />
      <SchemaVoidField x-component="Title" x-content="Fullness: " />
      <SchemaStringField
        title="Not Full Width by Default (fullness=false)"
        x-decorator="FormItem"
        x-component="Cascader"
        :enum="options"
        :x-decorator-props="{
          fullness: false,
        }"
      />
      <SchemaStringField
        title="Full Width (fullness=true)"
        x-decorator="FormItem"
        x-component="Cascader"
        :enum="options"
        :x-decorator-props="{
          fullness: true,
        }"
      />
      <SchemaStringField
        title="InputNumber Full Width (fullness=true)"
        x-decorator="FormItem"
        x-component="InputNumber"
        :x-decorator-props="{
          fullness: true,
        }"
      />
      <SchemaStringField
        title="InputNumber Not Full Width (fullness=false)"
        x-decorator="FormItem"
        :x-decorator-props="{
          addonBefore: 'addonBefore',
          addonAfter: 'addonAfter',
        }"
        x-component="InputNumber"
      />
      <SchemaVoidField x-component="Title" x-content="Auxiliary Info: " />
      <SchemaStringField
        title="Required Asterisk"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          asterisk: true,
          labelCol: 6,
          wrapperCol: 10,
        }"
      />
      <SchemaStringField
        title="Prefix"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          addonBefore: 'addonBefore',
          labelCol: 6,
          wrapperCol: 10,
        }"
      />
      <SchemaStringField
        title="Suffix"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          addonAfter: 'addonAfter',
          labelCol: 6,
          wrapperCol: 10,
        }"
      />
      <SchemaStringField
        title="Help Text feedbackText"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackText: 'feedbackText',
          labelCol: 6,
          wrapperCol: 10,
        }"
      />
      <SchemaStringField
        title="Extra Info extra"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackText: 'feedbackText',
          extra: 'extra',
          labelCol: 6,
          wrapperCol: 10,
        }"
      />
      <SchemaVoidField x-component="Title" x-content="Form State: " />
      <SchemaVoidField x-component="FormLayout">
        <SchemaStringField
          title="Error State (feedbackStatus=error)"
          x-decorator="FormItem"
          x-component="Input"
          description="description"
          :x-decorator-props="{
            feedbackStatus: 'error',
          }"
        />
        <SchemaStringField
          title="Warning State (feedbackStatus=warning)"
          x-decorator="FormItem"
          x-component="Input"
          description="description"
          :x-decorator-props="{
            feedbackStatus: 'warning',
          }"
        />
        <SchemaStringField
          title="Success State (feedbackStatus=success)"
          x-decorator="FormItem"
          x-component="Input"
          description="description"
          :x-decorator-props="{
            feedbackStatus: 'success',
          }"
        />
        <SchemaStringField
          title="Loading State (feedbackStatus=pending)"
          x-decorator="FormItem"
          x-component="Input"
          description="description"
          :x-decorator-props="{
            feedbackStatus: 'pending',
          }"
        />
      </SchemaVoidField>
      <SchemaVoidField x-component="Title" x-content="Feedback Layout: " />
      <SchemaStringField
        title="Compact Mode Required"
        x-decorator="FormItem"
        x-component="Input"
        :required="true"
        :x-decorator-props="{
          feedbackLayout: 'terse',
        }"
      />
      <SchemaStringField
        title="Compact Mode with Feedback (feedbackLayout=terse)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackStatus: 'error',
          feedbackText: 'error message',
          feedbackLayout: 'terse',
        }"
      />
      <SchemaStringField
        title="Compact Mode without Feedback (feedbackLayout=terse)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackLayout: 'terse',
        }"
      />
      <SchemaStringField
        title="Loose Mode (feedbackLayout=loose)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackStatus: 'error',
          feedbackText: 'error message',
          feedbackLayout: 'loose',
        }"
      />
      <SchemaStringField
        title="Popover Mode (feedbackLayout=popover)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackStatus: 'warning',
          feedbackText: 'warning message',
          feedbackLayout: 'popover',
        }"
      />
      <SchemaStringField
        title="Popover Mode (feedbackLayout=popover)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackStatus: 'error',
          feedbackText: 'error message',
          feedbackLayout: 'popover',
        }"
      />
      <SchemaStringField
        title="Popover Mode (feedbackLayout=popover)"
        x-decorator="FormItem"
        x-component="Input"
        :x-decorator-props="{
          feedbackStatus: 'success',
          feedbackText: 'success message',
          feedbackLayout: 'popover',
        }"
      />
    </SchemaField>
  </FormProvider>
</template>

Display When Label Is Empty:

Colon:

Default:

No Colon (colon=false)

Fixed Width Settings:

Fixed Label Width (labelWidth):

Fixed Label Width (labelWidth) Overflow:

Description text

Fixed Label Width (labelWidth) Wrapped Text:

Description text

Fixed Content Width (wrapperWidth):

Alignment Settings:

Left-aligned Label (labelAlign=left):

Right-aligned Label (labelAlign=right, default):

Left-aligned Content (wrapperAlign=left, default):

Right-aligned Content (wrapperAlign=right):

tooltip:

Fullness:

Not Full Width by Default (fullness=false):

Full Width (fullness=true):

InputNumber Full Width (fullness=true):

InputNumber Not Full Width (fullness=false):

addonBefore

addonAfter

Auxiliary Info:

Required Asterisk:

Prefix:

addonBefore

Suffix:

addonAfter

Help Text feedbackText:

feedbackText

Extra Info extra:

feedbackText

extra

Form State:

Feedback Layout:

Compact Mode Required:

Compact Mode with Feedback (feedbackLayout=terse):

error message

Compact Mode without Feedback (feedbackLayout=terse):

Loose Mode (feedbackLayout=loose):

error message

Size Control Example

<script setup lang="tsx">
import type { DataField } from '@silver-formily/core'
import { createForm, onFieldChange } from '@silver-formily/core'
import {
  Cascader,
  DatePicker,
  Form,
  FormItem,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
} from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'

function Div(props, { slots }) {
  return <div {...props}>{slots?.default()}</div>
}

const form = createForm({
  values: {
    size: 'default',
  },
  effects: () => {
    onFieldChange('size', ['value'], (field, form) => {
      form.setFieldState('sizeWrap.*', (state) => {
        if (state.decorator[1]) {
          state.decorator[1].size = (field as DataField).value
        }
      })
    })
  },
})
const { SchemaField, SchemaStringField, SchemaVoidField, SchemaBooleanField }
  = createSchemaField({
    components: {
      FormItem,
      Input,
      Select,
      Cascader,
      DatePicker,
      Switch,
      InputNumber,
      Radio,
      Div,
    },
  })
</script>

<template>
  <Form :form="form">
    <SchemaField>
      <SchemaStringField
        name="size"
        title="Radio.Group"
        x-decorator="FormItem"
        x-component="Radio.Group"
        :enum="[
          { value: 'small', label: 'Small' },
          { value: 'default', label: 'Default' },
          { value: 'large', label: 'Large' },
        ]"
      />
      <SchemaVoidField name="sizeWrap" x-component="Div">
        <SchemaStringField
          name="input"
          title="Input"
          x-decorator="FormItem"
          x-component="Input"
          required
        />
        <SchemaStringField
          name="select1"
          title="Multiple Select"
          x-decorator="FormItem"
          x-component="Select"
          :enum="[
            {
              label: 'Option 1',
              value: 1,
            },
            {
              label: 'Option 2',
              value: 2,
            },
          ]"
          :x-component-props="{
            multiple: true,
            placeholder: 'Please select',
          }"
          required
        />
        <SchemaStringField
          name="select2"
          title="Select"
          x-decorator="FormItem"
          x-component="Select"
          :enum="[
            {
              label: 'Option 1',
              value: 1,
            },
            {
              label: 'Option 2',
              value: 2,
            },
          ]"
          :x-component-props="{
            placeholder: 'Please select',
          }"
          required
        />
        <SchemaStringField
          name="Cascader"
          title="Cascader"
          x-decorator="FormItem"
          x-component="Cascader"
          required
        />
        <SchemaStringField
          name="DatePicker"
          title="DatePicker"
          x-decorator="FormItem"
          x-component="DatePicker"
          required
        />
        <SchemaStringField
          name="InputNumber"
          title="InputNumber"
          x-decorator="FormItem"
          x-component="InputNumber"
          required
        />
        <SchemaBooleanField
          name="Switch"
          title="Switch"
          x-decorator="FormItem"
          x-component="Switch"
          required
        />
      </SchemaVoidField>
    </SchemaField>
  </Form>
</template>

API

FormItem Attributes

Prop	Type	Description	Default
`label`	`string` \| `VNode`	Label	-
`for`	`string`	Associated form control id/name	-
`tooltip`	`string` \| `VNode`	Question-mark tooltip content	-
`addonBefore`	`string` \| `VNode`	Prefix addon content	-
`addonAfter`	`string` \| `VNode`	Suffix addon content	-
`extra`	`string` \| `VNode`	Extra description text	-
`feedbackText`	`string`	Feedback text	-
`feedbackStatus`	`enum`	Feedback status	-
`asterisk`	`boolean`	Whether to show an asterisk	-
`colon`	`boolean`	Whether to show a colon	`true`
`labelAlign`	`enum`	Label text alignment	-
`wrapperAlign`	`enum`	Content text alignment	-
`labelWrap`	`boolean`	Whether label text wraps. Overflow text is ellipsized and shown in a tooltip on hover.	`false`
`labelWidth`	`number`	Fixed label width	-
`wrapperWidth`	`number`	Fixed content width	-
`labelCol`	`number`	Label columns in a 24-column grid. Together with `wrapperCol`, the total should be 24.	-
`wrapperCol`	`number`	Content columns in a 24-column grid. Together with `labelCol`, the total should be 24.	-
`fullness`	`boolean`	Whether content fills available width	`false`
`size`	`enum`	Size	`default`
`layout`	`enum`	Layout mode	-
`feedbackLayout`	`enum`	Feedback layout	`'loose'`
`tooltipLayout`	`enum`	Tooltip layout	-

FormItem.BaseItem

A pure presentational component with the same props as FormItem. It does not bridge state with Formily Core and is mainly useful when you need FormItem styling/layout capabilities without connecting to Field state.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

FormItem ​

Common Props Example ​

Size Control Example ​

API ​

FormItem Attributes ​

FormItem.BaseItem ​

FormItem

Common Props Example

Size Control Example

API

FormItem Attributes

FormItem.BaseItem

Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11