Inputs

TextArea

Multi-line text input with label, glass styling and configurable resize behavior.

<script>
  import { TextArea } from "@codeatlasdev/ui";
  let message = $state("");
</script>

<TextArea label="Message" bind:value={message} rows={4} />

The label floats when the field has a value or a placeholder. description is hidden while an error is shown. Text stays at 16px or more on touch devices so iOS Safari does not zoom on focus.

Basic

Empty, with a placeholder, and pre-filled.

Message

Notes

Description

Code

<script lang="ts">
  import { TextArea } from '@codeatlasdev/ui';

  let message = $state('');
  let notes = $state('');
  let description = $state('Some initial content here.');
</script>

<div class="col">
  <TextArea label="Message" bind:value={message} />
  <TextArea label="Notes" placeholder="Write something…" bind:value={notes} />
  <TextArea label="Description" bind:value={description} />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 480px;
  }
</style>

States

Helper text, error, required, read-only, disabled and resize="none".

Feedback

Max 500 characters.

Bio

Bio must be at least 20 characters.

Summary

Read-only content

Cannot be edited.

Disabled content

Fixed

Code

<script lang="ts">
  import { TextArea } from '@codeatlasdev/ui';

  let bio = $state('');
  let summary = $state('');
  let feedback = $state('');
  let fixed = $state('This textarea cannot resize.');
</script>

<div class="col">
  <TextArea label="Feedback" description="Max 500 characters." bind:value={feedback} />
  <TextArea
    label="Bio"
    bind:value={bio}
    error="Bio must be at least 20 characters."
    description="Tell us about yourself."
  />
  <TextArea label="Summary" required bind:value={summary} />
  <TextArea label="Read-only content" value="Cannot be edited." readonly />
  <TextArea label="Disabled content" value="Cannot be edited." disabled />
  <TextArea label="Fixed" bind:value={fixed} resize="none" rows={3} />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 480px;
  }
</style>

Props

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable text value.
`label`	`string`	–	Label text.
`placeholder`	`string`	`''`	Native placeholder. Also floats the label.
`rows`	`number`	`4`	Initial visible row count.
`minRows`	`number`	–	Minimum rows for the min-height. Defaults to rows.
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	CSS resize behavior.
`error`	`string`	–	Error message. Sets the error styling.
`description`	`string`	–	Helper text shown below. Hidden when error is set.
`helperText`	`string`	–	Deprecated alias of description.
`disabled`	`boolean`	`false`	Disables the textarea.
`required`	`boolean`	`false`	Marks the field as required, with a visual asterisk.
`readonly`	`boolean`	`false`	Makes the textarea read-only.
`name`	`string`	–	Native name, for form submission.
`class`	`string`	–	Extra classes on the root.
`oninput`	`(value: string) => void`	–	Called on every keystroke with the new value.
`onchange`	`(value: string) => void`	–	Called when the value is committed (blur).
`onblur`	`(e: FocusEvent) => void`	–	Called when the textarea loses focus.