Textarea — Hesoyam

Default

Native attrs (placeholder, rows, readonly) pass through to the textarea.


        
          1
          
          <Textarea
        

          2
          
            aria-label="Release notes"
        

          3
          
            placeholder="Warm pool in IAD after the deploy."
        

          4
          
            class="min-h-[100px]"
        

          5
          
          />

Sizes

small is 13px. default and medium share the 14px style. large is 16px.


        
          1
          
          <Textarea size="small" :default-value="sample" class="min-h-[100px]" />
        

          2
          
          <Textarea size="default" :default-value="sample" class="min-h-[100px]" />
        

          3
          
          <Textarea size="large" :default-value="sample" class="min-h-[100px]" />

Disabled


        
          1
          
          <Textarea
        

          2
          
            disabled
        

          3
          
            aria-label="Release notes"
        

          4
          
            placeholder="Warm pool in IAD after the deploy."
        

          5
          
            class="min-h-[100px]"
        

          6
          
          />

Error

Pass a string to error. The message is wired with aria-invalid and aria-describedby.

Release notes can't exceed 500 characters.


        
          1
          
          <Textarea
        

          2
          
            size="small"
        

          3
          
            error="Release notes can't exceed 500 characters."
        

          4
          
            :default-value="sample"
        

          5
          
            class="min-h-[100px]"
        

          6
          
          />

Read only

readonly is a native attr. The field stays copyable and skips the disabled wash.

Warm pool in IAD after the deploy. Sticky sessions stay on the same egress IP for 30 minutes.


        
          1
          
          <Textarea
        

          2
          
            readonly
        

          3
          
            aria-label="Release notes"
        

          4
          
            :default-value="sample"
        

          5
          
            class="min-h-[100px]"
        

          6
          
          />

Rows

Set rows when the surface has a fixed vertical budget. resize-y is already on the field.


        
          1
          
          <Textarea
        

          2
          
            :rows="5"
        

          3
          
            aria-label="Commit message"
        

          4
          
            placeholder="Summarize the change in one paragraph."
        

          5
          
          />

Best practices

Multi-line content only: commit messages, descriptions, notes. A name, domain, or token is Input.
Pick a generous default rows. Do not let the field push the primary action below the fold.
Validate on blur. Pass the failure string to error so the inline message replaces helper text.
Trim leading and trailing whitespace on submit so empty newlines do not pass required.
Labels are short Title Case nouns (Description, Release Notes). Placeholders show an example, not "Enter a description".
Error copy names the field and the constraint, ends with a period, and skips "please": Description is required..
medium is a size alias of default. New code should use small, default, or large.
Always give the control an accessible name: a visible label or aria-label.