Textarea — lunaDOM Docs

The <luna-textarea> component provides multi-line text input with auto-resize and customization options.

Paths

/lunadom/components/textarea/textarea.js

REQUIRED

Basic States

Sizes

Resize Modes

Customization

Slots
default - The content of the textarea.

Attributes
label - The label of the textarea.
help-text - The help text of the textarea.
rows - The number of rows of the textarea.
placeholder - The placeholder of the textarea.
disabled - Whether the textarea is disabled.
size - The size of the textarea. sm, md, lg. Defaults to 'md'.
resize - The resize mode of the textarea. none, vertical, horizontal, both, auto. Default: 'none'.
value - The value of the textarea.

CSS Variables
--luna-textarea-bg - Background color of the textarea.
--luna-textarea-color - Text color of the textarea.
--luna-textarea-border - Border color of the textarea.
--luna-textarea-border-focus - Border color when focused.
--luna-textarea-label - Label color of the textarea.
--luna-textarea-help - Help text color of the textarea.

Events
luna-input - Emitted when the input value changes.
luna-change - Emitted when the change event is triggered.

Example Code

<luna-textarea label="Message" placeholder="Standard textarea..." help-text="Please enter at least 20 characters." > </luna-textarea> <luna-textarea label="Required Field" value="Pre-filled content..." rows="2" > </luna-textarea> <luna-textarea label="Disabled Textarea" disabled value="I am read-only and unclickable." > </luna-textarea>  <luna-textarea size="sm" label="Small Textarea" rows="2"> </luna-textarea> <luna-textarea size="md" label="Medium Textarea" rows="2"> </luna-textarea> <luna-textarea size="lg" label="Large Textarea" rows="2"> </luna-textarea>  <luna-textarea label="Auto-Growing (resize='auto')" resize="auto" placeholder="Start typing to see me expand..." > </luna-textarea> <luna-textarea label="Vertical Resize Only" resize="vertical" rows="2" > </luna-textarea> <luna-textarea label="Both Horizontal & Vertical" resize="both" rows="2" > </luna-textarea> <luna-textarea label="No Resize (resize='none')" resize="none" rows="2" > </luna-textarea>