refactor(components): [form/form-item] use type-based definitions by snowbitx · Pull Request #23483 · element-plus/element-plus

snowbitx · 2026-01-19T17:36:22Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.
ref Refactor Component Props to type-based declarations #23399

Summary by CodeRabbit

Refactor
- Converted Form and FormItem public prop typings to explicit TypeScript interfaces (FormProps, FormMetaProps, FormItemProps) with deprecation notices for prior types.
- Switched components to typed props with defaults for several fields (e.g., labelPosition, showMessage, required, inlineMessage, labelWidth).
- Preserved runtime behavior and backward compatibility while clarifying exported prop shapes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

github-actions · 2026-01-19T17:36:30Z

coderabbitai · 2026-01-19T17:36:34Z

📝 Walkthrough

Walkthrough

Runtime prop schemas for Form and FormItem were replaced with explicit exported TypeScript interfaces (FormProps, FormMetaProps, FormItemProps). Components now use typed defineProps() wrapped with withDefaults for defaults; deprecated ExtractPropTypes-based exports were retained as annotated aliases.

Changes

Cohort / File(s)	Summary
Form core types `packages/components/form/src/form.ts`	Added exported interfaces `FormProps` and `FormMetaProps` (includes fields like size, model, rules, labelPosition, inlineMessage, scrollIntoViewOptions); removed exported `ExtractPropTypes` aliases; added `ComponentSize` import, `ExtractPublicPropTypes` usage, and deprecation notices for old type exports.
FormItem types `packages/components/form/src/form-item.ts`	Added exported interface `FormItemProps` (label, labelWidth, labelPosition, prop, required, rules, error, validateStatus, for, inlineMessage, showMessage, size); removed `ExtractPropTypes`-based export; added `ComponentSize` import and public alias via `ExtractPublicPropTypes` with deprecation note.
Vue components (props usage) `packages/components/form/src/form.vue`, `packages/components/form/src/form-item.vue`	Switched from runtime prop schemas (`formProps`/`formItemProps`) to `defineProps<FormProps>()` / `defineProps<FormItemProps>()` wrapped with `withDefaults(...)` to supply defaults (e.g., labelPosition, showMessage, required, inlineMessage); updated imports to use new interfaces.
Public API surface `packages/components/form/src/...`	Public prop typings changed from `ExtractPropTypes`-derived exports to explicit interfaces; `ExtractPublicPropTypes` aliases preserved and annotated as deprecated.

Sequence Diagram(s)

(omitted — changes are type/interface and component prop typing updates without new multi-component control flow)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

refactor(components): [progress] use type-based definitions #23451: Same refactor pattern — replacing ExtractPropTypes-based exports with explicit interfaces and switching components to withDefaults(defineProps<...>()).
refactor(components): [input-tag] use type-based definitions #23436: Similar migration of runtime prop schemas to exported TypeScript interfaces and updating components to typed defineProps with defaults.
refactor(components): [radio] use type-based definitions #23466: Applies the same type-based prop refactor (explicit interfaces, ExtractPublicPropTypes aliases, and withDefaults-wrapped defineProps).

Suggested reviewers

rzzf
btea
keeplearning66

Poem

🐰 Hopping through props with a TypeScript tune,

Interfaces sprout beneath the moon.
withDefaults sets defaults nice and neat,
Deprecated echoes take their seat.
A tidy hop — the form feels complete.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: converting the form and form-item components from schema-based prop definitions to type-based definitions.
Description check	✅ Passed	The description follows the template with all checklist items completed, contributing guide confirmed, target branch verified as dev, and references issue `#23399`.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-01-19T17:38:07Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@23483

npm i https://pkg.pr.new/element-plus/element-plus@23483

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: 2d7816a

github-actions · 2026-01-19T17:43:39Z

🧪 Playground Preview: https://element-plus.run/?pr=23483
Please comment the example via this playground if needed.

keeplearning66

Thank you!

github-actions · 2026-01-20T07:35:46Z

@snowbitx Thanks for your contribution! ❤️

…ement-plus#23483) * refactor(components): [form] use type-based definitions * fix: add export * fix: add type

refactor(components): [form] use type-based definitions

005d8b4

pull-request-triage Bot assigned snowbitx Jan 19, 2026

pull-request-triage Bot added the Needs Review label Jan 19, 2026

github-actions Bot added the Contribution::Community label Jan 19, 2026

Dsaquel changed the title ~~refactor(components): [form] use type-based definitions~~ refactor(components): [form/form-item] use type-based definitions Jan 19, 2026

Dsaquel mentioned this pull request Jan 19, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

keeplearning66 reviewed Jan 20, 2026

View reviewed changes

Comment thread packages/components/form/src/form-item.ts

btea reviewed Jan 20, 2026

View reviewed changes

Comment thread packages/components/form/src/form-item.ts

fix: add export

bea34a7

keeplearning66 reviewed Jan 20, 2026

View reviewed changes

Comment thread packages/components/form/src/form-item.ts Outdated

snowbitx and others added 2 commits January 20, 2026 10:44

fix: add type

e788dea

Merge branch 'dev' into refactor/use-type-form

2d7816a

keeplearning66 approved these changes Jan 20, 2026

View reviewed changes

btea approved these changes Jan 20, 2026

View reviewed changes

rzzf approved these changes Jan 20, 2026

View reviewed changes

rzzf merged commit 5ea2563 into element-plus:dev Jan 20, 2026
15 of 16 checks passed

lw56777 pushed a commit to lw56777/element-plus that referenced this pull request Jan 27, 2026

refactor(components): [form/form-item] use type-based definitions (el…

eb2c610

…ement-plus#23483) * refactor(components): [form] use type-based definitions * fix: add export * fix: add type

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

This was referenced Apr 13, 2026

feat(components): [form] add autocomplete prop #24037

Closed

.643647360741672:5bfb9d185bfcdf136a7c935fac6c1dd5_69e258102c1911a50baa65a5.69e258122c1911a50baa65a9.69e25812df7f187107134572:Trae CN.T(2026/4/17 23:56:02) #24091

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(components): [form/form-item] use type-based definitions#23483

refactor(components): [form/form-item] use type-based definitions#23483
rzzf merged 4 commits into
element-plus:devfrom
snowbitx:refactor/use-type-form

snowbitx commented Jan 19, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Jan 19, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jan 19, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Jan 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

keeplearning66 left a comment

Uh oh!

Uh oh!

github-actions Bot commented Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

snowbitx commented Jan 19, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jan 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

keeplearning66 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

snowbitx commented Jan 19, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Jan 19, 2026 •

edited

Loading

coderabbitai Bot commented Jan 19, 2026 •

edited

Loading

pkg-pr-new Bot commented Jan 19, 2026 •

edited

Loading