GkTextarea

Native <textarea> with God Kit styling aligned with GkInput (wrapper, attrs forwarding, focus events). Works with GkField for labels and errors.

When to use

Use for free-form multi-line input such as notes, descriptions, and support context fields.

Live Examples

Basic

Multiline text inside GkField.

Notes

Hello

vue

<script setup lang="ts">
import { GkField, GkTextarea } from 'god-kit/vue'
import { ref } from 'vue'

const notes = ref('Hello')
</script>

<template>
  <GkField label="Notes">
    <GkTextarea v-model="notes" :rows="3" />
  </GkField>
</template>

Trim on blur

v-model.trim clears leading/trailing whitespace when the control loses focus.

Description

vue

<script setup lang="ts">
import { GkField, GkTextarea } from 'god-kit/vue'
import { ref } from 'vue'

const description = ref('')
</script>

<template>
  <GkField label="Description">
    <GkTextarea
      v-model.trim="description"
      :rows="6"
      placeholder="Write details…"
    />
  </GkField>
</template>

Readonly

Read-only body with optional field error region for validation messaging.

Readonly transcript

Fixed transcript text.

vue

<script setup lang="ts">
import { GkField, GkTextarea } from 'god-kit/vue'
import { ref } from 'vue'

const transcript = ref('Fixed transcript text.')
const error = ref('')
</script>

<template>
  <GkField label="Readonly transcript" :error="error || undefined">
    <GkTextarea v-model="transcript" readonly />
  </GkField>
</template>

API

Props

Prop	Type	Default	Description
modelValue	string	required	Bound text (v-model)
id	string	—	Overrides injected field id
name	string	—	Form name
rows	number	4	Visible rows
placeholder	string	—	Placeholder
disabled	boolean	false	Disabled
readonly	boolean	false	Read-only
autocomplete	string	—	Autocomplete hint
autofocus	boolean	false	Focus on mount
ariaLabel	string	—	When not inside GkField
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	Visual control scale; omit for GK_FORM_CONTROLS / global defaults

Root class applies to the wrapper; other attributes are forwarded to <textarea>.

Use v-model.trim to trim on blur (same idea as GkInput).

Events

Event	Payload	Description
update:modelValue	string	Emitted on input
update:focused	boolean	true on focus, false on blur

Expose

Name	Type	Description
textarea	HTMLTextAreaElement	Native element

Examples

Each scenario under Live Examples includes a copyable Vue snippet.

Accessibility notes

• Keep labels visible through GkField where possible; use ariaLabel only for standalone cases.
• For long text, ensure focus styles remain visible in scrollable layouts.

Related

• Form control size
• GkInput
• GkField
• GkForm