FormInput component

The FormInput component is a reusable input field designed for integration with useFormik composable. It handles field value updates, validation errors, and accessibility attributes automatically. With support for customization through props, it ensures consistent styling and behavior across forms while simplifying form logic.

Props:

Name	Type	Required	Description
formik	`object`	`false`	The Formik instance manages form state, validation, and field values. Using Vue’s provide/inject, the Formik instance can be passed to child components. If no props are provided, the component searches for a parent Formik instance and throws an error if none is found.
name	`string`	`true`	The name of the form field, used to identify the field in the Formik instance.
label	`string`	`false`	An optional label for the input field. If provided, it is displayed as a field label.
placeholder	`string`	`false`	An optional placeholder for the input field. It is displayed inside the input when no value is present.
type	`string`	`false`	The type of the input field (e.g., 'text', 'password', 'email'). Defaults to 'text' if not provided.
readonly	`boolean`	`false`	Determines if the input field is read-only. Defaults to false.
disabled	`boolean`	`false`	Determines if the input field is disabled. Defaults to false.
required	`boolean`	`false`	Determines if the input field is required. Defaults to false.
readonly	`boolean`	`false`	Determines if the input field is read-only. Defaults to false.
inputProps	`object`	`false`	Additional props to pass to the input field, such as attributes like 'min', 'max', 'step', etc.

Slots

Name	Description
default	Slot for rendering additional content or components inside the input container, below the input field.
prepend	Slot for rendering content or components before the input field, such as an icon or label.
append	Slot for rendering content or components after the input field, such as an action button or icon.

Usage:

<FormInput
  :formik="formik"
  name="name"
  label="Name:"
  type="text"
  placeholder="Enter your name"
/>

If your field has array of values then you can use the name like:

<FormInput
  :formik="formik"
  :name="`contacts[${index}].code`"
  type="tel"
  :placeholder="`Enter contact number ${index + 1}`"
/>

Class Naming Style

Base Class: The base class for this component is vf-field. It serves as the primary identifier for the component and provides the foundational styles.
Dynamic Type-Specific Classes: The component applies a type-specific class dynamically using the type prop.
For specific types (e.g., password, email), the classes will be vf-password-field or vf-email-field, respectively.
Modifier Classes: These classes modify the appearance or behavior of the base component:
- vf-field--error: Applied when the field has a validation error, determined by formik.hasFieldError(name).
- vf-field--disabled: Applied when the field is in a disabled state, determined by the disabled prop.
- vf-field--readonly: Applied when the field is set to read-only, determined by the readonly prop.
Input Element Classes: Classes applied specifically to the input element within the component:
- vf-input--error: Indicates an error in the input field, applied when formik.hasFieldError(name) is true.
- vf-input--disabled: Marks the input as disabled, determined by the disabled prop.
- vf-input--readonly: Marks the input as read-only, determined by the readonly prop.
Error Message Class:
- vf-error: Used for displaying error messages below the input field. The error message is rendered when formik.hasFieldError(name) is true.
Dynamic Behavior: Classes and attributes are applied conditionally based on the component's props and state:
- The vf-field--error and vf-input--error classes are applied when formik.hasFieldError(name) is true.
- The vf-field--disabled and vf-input--disabled classes are applied when the disabled prop is true.
- The vf-field--readonly and vf-input--readonly classes are applied when the readonly prop is true.
- ARIA attributes like aria-labelledby, aria-describedby, aria-invalid, aria-required, aria-readonly, and aria-disabled are applied dynamically to enhance accessibility.

Why Components?

FormSelect

FormInput component

Props:

Slots

Usage:

Class Naming Style

Previous

Next