Textarea

Multi-line text input with optional hint and error message. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiTextarea } from '@ziyarago/ui/vue'

Default

Vue
<UiTextarea
  label="Special requests"
  placeholder="Ground floor, near the elevator..."
  :rows="4"
  v-model="value"
 />

Hint and limit

Vue
<UiTextarea
  label="Notes"
  hint="Up to 200 characters"
  :maxlength="200"
  :rows="3"
  v-model="value"
 />

Error

Vue
<UiTextarea
  label="Review"
  error="Please write at least 20 characters"
  v-model="value"
  :rows="3"
 />

Sizes

Vue
<UiTextarea size="xs" label="Notes" :rows="3" v-model="value" />

<UiTextarea size="sm" label="Notes" :rows="3" v-model="value" />

<UiTextarea size="md" label="Notes" :rows="3" v-model="value" />

<UiTextarea size="lg" label="Notes" :rows="3" v-model="value" />

<UiTextarea size="xl" label="Notes" :rows="3" v-model="value" />

API reference

Multi-line text input. Use for comments, descriptions and other long text.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring''Current value.
labelstring—Label shown above the control.
placeholderstring—Placeholder text.
hintstring—Helper text under the control. Hidden while error is set.
errorstring—Error message under the control. Turns the control red and is announced with role="alert".
disabledbooleanfalseDisables the control.
rowsnumber4Visible text rows.
maxlengthnumber—Maximum number of characters.
readonlybooleanfalseMakes the textarea read-only.
requiredbooleanfalseAdds a red asterisk to the label and the native required attribute.
autoResizebooleanfalseGrows with the content (CSS field-sizing: content, Chromium and Safari).
resizebooleantruefalse removes the manual resize handle.
showCountbooleanfalseShows the character count under the field, as "n / maxlength" when maxlength is set.
namestring—Native name attribute.
sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the new string on every keystroke.
inputNative input event (after change), receives the Event.
blurNative blur.
focusNative focus.