Textarea

Displays a textarea.

<textarea placeholder="Type something..."></textarea>

Import

@import "@webtui/css/components/textarea.css";

Usage

<textarea></textarea>

Examples

Sizing

<textarea size-="small" placeholder="Small textarea"></textarea>
<textarea placeholder="Default textarea"></textarea>
<textarea size-="large" placeholder="Large textarea"></textarea>

body {
  display: flex;
  flex-direction: column;
  gap: 1lh;
}

Reference

Extending

To customize textarea styles, extend the component using @layer components:

@layer components {
    textarea,
    [is-~="textarea"] {
        &[size-="thicc"] {
            min-height: 6lh;
            padding: 2lh 4ch;
        }

        /* Add more custom styles here */
    }
}

Scope

• All native <textarea> elements
• Any element with is-~="textarea"

textarea,
[is-~="textarea"] {
  /* ... */
}