FormTextarea component

The FormTextarea component is a reusable textarea 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.
rows	`number \| string`	`false`	The number of rows to display in the textarea. Defaults to 3 if not provided.
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 custom data attributes, 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:

<FormTextareaField
  :formik="formik"
  name="bio"
  label="Bio:"
  placeholder="Enter your bio"
/>

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

<FormTextareaField
  :formik="formik"
  :name="`contacts[${index}].notes`"
  placeholder="Enter notes"
/>

Class Naming Style

Base Classes: The foundational classes for this component are:
- vf-field: The primary class applied to the container, used for general field styling.
- vf-textarea-field: An additional base-specific class indicating the field is a textarea input.
Dynamic Classes: Classes applied conditionally based on the component's state and props:
- vf-field--error: Applied to the container when the field has a validation error, determined by formik.hasFieldError(name).
- vf-input--disabled: Applied to the textarea element when the disabled prop is true, indicating that the field is not editable.
- vf-input--readonly: Applied to the textarea element when the readonly prop is true, marking the field as read-only.
- vf-input--error: Applied to the textarea element when the field has a validation error, determined by formik.hasFieldError(name).
Input Wrapper Class: The vf-input class is applied to the wrapper around the textarea element. It serves as the container for the input and optional prepend/append slots.
Error Message Class:
- vf-error: Applied to the paragraph element displaying error messages. This class is rendered when formik.hasFieldError(name) is true.

FormSelect

FormContentEditable

FormTextarea component

Props:

Slots

Usage:

Class Naming Style

Previous

Next