formstextarea

Textarea

Multi-line text input with autoresize support and form field integration.

Import#

import { Textarea } from 'moraine'

Slot Structure#

Multi-line text input with optional header and footer slots.

root
├── header (optional)
├── input
└── footer (optional)

Examples#

Variants#

Outline/subtle/ghost/none visual variants.

1
function Variants() {
2
  const VARIANTS: TextareaVariantName[] = ['outline', 'subtle', 'ghost', 'none']
3

4
  type TextareaVariantName = Exclude<TextareaT.Variant['variant'], undefined>
5

6
  return (
7
    <div class="gap-3 grid lg:grid-cols-4 sm:grid-cols-2">
8
      <For each={VARIANTS}>
9
        {(variant) => <Textarea variant={variant} placeholder={`Variant: ${variant}`} rows={2} />}
10
      </For>
11
    </div>
12
  )
13
}

Sizes#

Textarea size scale from xs to xl.

1
function Sizes() {
2
  const SIZES: TextareaSizeName[] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  type TextareaSizeName = Exclude<TextareaT.Variant['size'], undefined>
5

6
  return (
7
    <div class="gap-3 grid lg:grid-cols-3 sm:grid-cols-2">
8
      <For each={SIZES}>
9
        {(size) => <Textarea size={size} placeholder={`Size: ${size}`} rows={2} />}
10
      </For>
11
    </div>
12
  )
13
}

Autoresize#

Autoresize growth with maxrows.

1
function Autoresize() {
2
  const [value, setValue] = createSignal('Type here to see autoresize...')
3

4
  return (
5
    <div class="max-w-xl space-y-3">
6
      <Textarea
7
        autoResize
8
        maxRows={6}
9
        value={value()}
10
        onValueChange={(next) => setValue(String(next ?? ''))}
11
        placeholder="Start typing..."
12
      />
13
      <p class="text-xs text-muted-foreground">Characters: {value().length}</p>
14
    </div>
15
  )
16
}

Header + Footer#

Build composer-like surfaces using header/footer slots.

1
function HeaderFooter() {
2
  const [composerValue, setComposerValue] = createSignal('Hello Moraine!')
3

4
  return (
5
    <div class="gap-6 grid lg:grid-cols-3">
6
      <Textarea
7
        placeholder="Ask, search or chat..."
8
        header={
9
          <>
10
            <span class="font-semibold">Info text</span>
11
            <Icon name="i-lucide-info" class="text-base ms-auto" />
12
          </>
13
        }
14
        classes={{
15
          header: 'border-b border-border',
16
          input: 'min-h-24',
17
        }}
18
      />
19

20
      <Textarea
21
        value={composerValue()}
22
        onValueChange={(nextValue) => setComposerValue(String(nextValue ?? ''))}
23
        placeholder="Write your message..."
24
        autoResize
25
        footer={
26
          <>
27
            <span>{composerValue().length}/280 characters</span>
28
            <Button size="xs" class="ms-auto">
29
              Send
30
            </Button>
31
          </>
32
        }
33
        classes={{
34
          footer: 'b-(t border)',
35
          input: 'min-h-24',
36
        }}
37
      />
38

39
      <Textarea
40
        placeholder="console.log('Hello, world!');"
41
        header={
42
          <>
43
            <Icon name="i-lucide-code" class="text-base" />
44
            <span>script.js</span>
45
          </>
46
        }
47
        footer={
48
          <>
49
            <span>Line 1, Column 1</span>
50
            <span class="ms-auto">JavaScript</span>
51
          </>
52
        }
53
        classes={{
54
          header: 'b-(b border)',
55
          footer: 'b-(t border)',
56
          input: 'min-h-28',
57
        }}
58
      />
59
    </div>
60
  )
61
}

API Reference#

Attributes#

Slotroot1 attribute

Textarea wrapper that owns header, textarea, footer, and autoresize state.

Data Attributes

Data Attribute	Description
data-focused	State or slot attribute exposed for styling hooks and selectors.

Props#

Prop	Type	Default	Description
autofocus	`boolean \| undefined`	`false`	Whether to automatically focus the textarea on mount.
autofocusDelay	`number \| undefined`	`0`	Delay in milliseconds before focusing the textarea.
autoresize	`boolean \| undefined`	—	—
autoResize	`boolean \| undefined`	`false`	Whether the textarea should automatically resize based on content.
autoResizeDelay	`number \| undefined`	`0`	Delay in milliseconds before triggering autoresize on mount.
children	`JSX.Element`	—	Children elements, rendered inside the root below the textarea.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`TextareaT.Classes \| undefined`	—	—
defaultValue	`TextareaT.Value`	—	The default value of the input (uncontrolled).
disabled	`boolean \| undefined`	`false`	Whether the input is disabled.
footer	`JSX.Element`	—	Element to render below the textarea.
header	`JSX.Element`	—	Element to render above the textarea.
id	`string \| undefined`	—	The ID of the input element.
maxLength	`string \| number \| undefined`	—	Maximum character length for the textarea.
maxRows	`number \| undefined`	`0`	Maximum number of rows allowed during autoresize.
modelModifiers	`M \| undefined`	—	Modifiers for input processing (e.g., lazy, trim, number).
name	`string \| undefined`	—	The name of the input element, used for form submission.
onBlur	`JSX.FocusEventHandlerUnion<HTMLTextAreaElement, FocusEvent> \| undefined`	—	Native blur event handler.
onChange	`((value: ModifierValue<M>) => void) \| undefined`	—	Callback when the textarea value change is committed.
onFocus	`JSX.FocusEventHandlerUnion<HTMLTextAreaElement, FocusEvent> \| undefined`	—	Native focus event handler.
onInput	`JSX.InputEventHandlerUnion<HTMLTextAreaElement, InputEvent> \| undefined`	—	Native input event handler.
onValueChange	`((value: ModifierValue<M>) => void) \| undefined`	—	Callback when the textarea value changes during input.
placeholder	`string \| undefined`	—	Placeholder text for the textarea.
readOnly	`boolean \| undefined`	`false`	Whether the input is read-only.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
required	`boolean \| undefined`	`false`	Whether the input is required.
rows	`number \| undefined`	`3`	Default number of rows.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`TextareaT.Styles \| undefined`	—	—
value	`TextareaT.Value`	—	The current value of the input (controlled).
variant	`"none" \| "outline" \| "ghost" \| "subtle" \| undefined`	—	—