Morpheme

Appearance

Standalone Form Components ​

Introduction ​

The Standalone Form Components provide enhanced flexibility and compatibility with various form validation libraries. Starting from version 1.0.0-beta.11, these components are decoupled from vee-validate, enabling seamless integration with different validation strategies and offering a more predictable behavior.

One of the key advantages of standalone form components is their compatibility with v-model, making data binding effortless and streamlined. Additionally, for users who still prefer using vee-validate, there are custom components available, marked by the Field suffix (e.g., InputField), which integrate with vee-validate and retain its capabilities.

By adopting the Standalone Form Components, developers can harness the full potential of the form components, allowing for a tailored form handling process that caters to diverse development preferences and validation libraries.

Adoption Strategy ​

To ensure a smooth transition and avoid breaking changes, all new standalone form components will not replace the current components. Instead, you can use them by importing the required components from the @morpheme/forms package, except for the Switch component, which should be imported from the @morpheme/switch package.

Standalone Form Component List ​

Here is a list of the available standalone form components:

  • Input
  • InputField
  • FormField
  • Radio
  • Checkbox
  • Select
  • SelectField
  • SelectOptions
  • FileInput
  • FileInputField
  • FileInputButtonActivator
  • FileInputDefaultActivator
  • FileInputItem
  • FileInputItems
  • Switch
  • TextareaInput
  • TextareaInputField

Basic Usage ​

The standalone form components are designed to work seamlessly with v-model, allowing easy data binding. Below is an example of basic usage:

Form validation with vee-validate ​

Here is an example of form validation using vee-validate:

Additional Examples ​

For more examples and usage scenarios, please check out the Storybook under the Experimental group.

By leveraging the Standalone Form Components and choosing the appropriate validation library, you can enhance your form handling process and create a better user experience tailored to your project's needs.