Textarea

A themed multi-line text input — bordered-box style, same convention as ClarificationPrompt's free-text field.

Playground

disabled

Type something, or focus to see the glow.

<script setup>
import { Textarea } from 'yemek'
</script>

<template>
  <Textarea v-model="aiInputText" :placeholder="t('erfassen.textPlaceholder')" />
</template>

Props

Prop	Type	Default	Description
modelValue	string	''	Current text (v-model).
placeholder	string	undefined	Placeholder shown when empty.
disabled	boolean	false	Disables the field.

Events

Event	Payload	Fired when
update:modelValue	string	Standard v-model, on every input.

Behavior notes

• Background is derived relative to the surface it's actually placed on (color-mix(in srgb, var(--yemek-color-text) 5%, var(--yemek-color-surface))), not the separate -inset token — same lesson as ChoicePicker (#39) and MealReviewCard's quantity panel (#41): a token tuned in isolation doesn't reliably match whatever surface a host app's own -surface token resolves to.
• Focus state animates a border-color change plus a soft accent-colored glow (box-shadow), rather than an instant color swap.
• prefers-reduced-motion: reduce disables the focus transition.