Textarea

A textarea field for forms.

Install

Run the following command to install the textarea component:

npx acc-nuxt add Textarea

Examples

Default

With info

This is an info message

Custom error

This is an error message

Loading

Custom Rows

Disabled

Custom styling

Use the class prop to add a custom class to the textarea wrapper. Then select the class inside the .lev-textarea-wrapper to change the value of the CSS variables

Form

The textarea component can be used in a form

Form Text

Form default values

Form Min Length

Form Max Length

Form disappearing

If the textarea unmounts, the value will be lost. But we can use keepValueOnUnmount prop to keep the value.

Form Textarea with label

Form values: { "bio": "Hello." } | Form errors: {}

Slots

The textarea component provides the following slots for customization.

#info
Slot for rendering custom info content below the textarea field.
#skeleton
Slot for rendering a custom skeleton content while the textarea is loading.

Props

The textarea component accepts the following props to customize its behavior.

placeholder:string— optional
default:undefined
The placeholder text.
disabled:boolean— optional
default:false
When true, the textarea is disabled.
validate:boolean— optional
default:true
When true, uses vee-validate for form validation.
validateOnInput:boolean— optional
default:false
When true, also validates the field as the user types, not only on blur.
name:string— optional
default:undefined
The name attribute used for vee-validate field registration.
defaultValue:string— optional
default:undefined
The default value for the textarea field.
loading:boolean— optional
default:false
When true, displays a skeleton state on the textarea.
info:string— optional
default:undefined
Informational text displayed beneath the textarea.
defaultError:string— optional
default:undefined
The default error message from vee-validate useField.
customError:string— optional
default:undefined
A custom error message displayed beneath the textarea.
disabledErrors:boolean— optional
default:false
When true, prevents validation error messages from being displayed. The customError prop is still shown, as it is managed manually.
rows:number | string— optional
default:undefined
The number of visible text lines for the textarea.

CSS Variables

The textarea component can be customized using the following CSS variables.

--lev-textarea-wrapper-width
default:100%
Width of the textarea wrapper.
--lev-textarea-wrapper-gap
default:8px
Gap between textarea and error/info messages.
--lev-textarea-padding
default:8px 12px
Padding inside the textarea field.
--lev-textarea-font-size
default:16px
Font size of the textarea text.
--lev-textarea-line-height
default:20px
Line height of the textarea text.
--lev-textarea-border-radius
default:5px
Border radius of the textarea corners.
--lev-textarea-border
default:1px solid #d9d9d9
Border style of the textarea.
--lev-textarea-bg
default:#ffffff
Background color of the textarea.
--lev-textarea-resize
default:none
Resize property of the textarea.
--lev-textarea-transition
default:border-color 100ms ease-out, background-color 100ms ease-out
Transition effects for the textarea.
--lev-textarea-placeholder-color
default:#aaacad
Color of the placeholder text.
--lev-textarea-error-border-color
default:#df3923
Border color when the textarea has an error.
--lev-textarea-disabled-color
default:#808080
Text color when the textarea is disabled.
--lev-textarea-disabled-bg
default:#d9d9d9
Background color when the textarea is disabled.
--lev-textarea-hover-border-color
default:#808080
Border color when hovering over the textarea.
--lev-textarea-bg-hover
default:#ffffff
Background color when hovering over the textarea.
--lev-textarea-focus-outline
default:1px solid #5298f5
Outline style when the textarea is focused.
--lev-textarea-focus-outline-offset
default:-1px
Outline offset when the textarea is focused.
--lev-textarea-error-color
default:#df3923
Color of the error message text.
--lev-textarea-error-font-size
default:12px
Font size of the error message.
--lev-textarea-info-font-size
default:12px
Font size of the info text.
--lev-textarea-info-color
default:inherit
Color of the info text.

On This Page