2.2 KiB
description, links
| description | links | |||||||
|---|---|---|---|---|---|---|---|---|
| A textarea element to input multi-line text. |
|
Usage
Use the v-model directive to control the value of the Textarea.
::component-code
external:
- modelValue props: modelValue: ''
::
Placeholder
Use the placeholder prop to set a placeholder text.
::component-code
props: placeholder: 'Type something...'
::
Color
Use the color prop to change the ring color when the Textarea is focused.
::component-code
ignore:
- placeholder props: color: gray highlight: true placeholder: 'Type something...'
::
::note
The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.
::
Variant
Use the variant prop to change the variant of the Textarea.
::component-code
ignore:
- placeholder props: color: gray variant: subtle placeholder: 'Type something...'
::
Size
Use the size prop to change the size of the Textarea.
::component-code
ignore:
- placeholder props: size: xl placeholder: 'Type something...'
::
Disabled
Use the disabled prop to disable the Textarea.
::component-code
ignore:
- placeholder props: disabled: true placeholder: 'Type something...'
::
Rows
Use the rows prop to set the number of rows. Defaults to 3.
::component-code
props: rows: 12
::
Autoresize
Use the autoresize prop to enable autoresizing the height of the Textarea.
::component-code
external:
- modelValue props: modelValue: 'This is a long text that will autoresize the height of the Textarea.' autoresize: true
::
Use the maxrows prop to set the maximum number of rows when autoresizing. If set to 0, the Textarea will grow indefinitely.
::component-code
external:
- modelValue props: modelValue: 'This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.' maxrows: 4 autoresize: true
::
API
Props
:component-props
Slots
:component-slots
Events
:component-events
Theme
:component-theme