Textarea · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JTextarea } from '@juxtui/ui'

Usage #

<JTextarea v-model="bio" label="Bio" autoresize />

Variants & examples #

Auto-resize#

Grows with its content up to maxRows, then scrolls.

Release notes

<script setup lang="ts">
const notes = ref('Keep typing | the field grows with you.')
</script>

<template>
  <JTextarea v-model="notes" label="Release notes" :rows="2" :max-rows="8" autoresize />
</template>

Validation#

Bio

Up to 80 characters.

<script setup lang="ts">
const bio = ref('')
const error = computed(() => (bio.value.length > 80 ? `${bio.value.length}/80 | a little shorter, please.` : undefined))
</script>

<template>
  <JTextarea
    v-model="bio"
    label="Bio"
    description="Up to 80 characters."
    :error="error"
    autoresize
  />
</template>

API #

Props

Prop	Type	Default	Description
modelValue	`string \| null`	`''`	Bound with `v-model`.
label	`string`	—	Visible label, also used as the accessible name.
description	`string`	—	Supporting text under the control. Replaced by the error message while one is shown.
error	`string \| boolean`	—	An error message, or `true` to mark the field invalid without a message.
required	`boolean`	`false`	Marks the field as required, natively and visually.
disabled	`boolean`	`false`	Disables the control.
id	`string`	—	Id of the control. Generated (SSR-safe) when omitted.
placeholder	`string`	—	Placeholder text.
rows	`number`	`3`	Initial visible rows.
autoresize	`boolean`	`false`	Grow to fit the content.
maxRows	`number`	`12`	Upper bound for auto-resize.
readonly	`boolean`	`false`	Read-only.
name	`string`	—	Form field name.

Events

Event	Payload	Description
update:modelValue	`string`	Emitted on input.

Slots

Slot	Props	Description
label	—	Custom label content.

Methods

Method	Signature	Description
focus()	`() => void`	Focus the textarea.

Accessibility #

Shares Input’s wiring: a real label, aria-describedby for description and error, aria-invalid when invalid.