## Input Textarea

Multi-line text input fields for longer content.

### Basic Textarea

Description
HTML

    <div style="max-width: 400px">
                <label
                    style="display: block; margin-bottom: 8px; font-weight: 500"
                >
                    Description
                </label>
                <textarea
                    class="textarea"
                    rows="4"
                    placeholder="Enter your description here..."
                    style="
                        width: 100%;
                        padding: 12px;
                        border: 1px solid var(--color_line_secondary);
                        border-radius: 8px;
                        font-family: inherit;
                        font-size: 14px;
                        resize: vertical;
                        box-sizing: border-box;
                    "
                ></textarea>
            </div>

### Textarea with Character Count

Bio
Maximum 200 characters 0 / 200
HTML

    <div style="max-width: 400px">
                <label
                    style="display: block; margin-bottom: 8px; font-weight: 500"
                >
                    Bio
                </label>
                <textarea
                    class="textarea"
                    rows="4"
                    maxlength="200"
                    placeholder="Tell us about yourself..."
                    style="
                        width: 100%;
                        padding: 12px;
                        border: 1px solid var(--color_line_secondary);
                        border-radius: 8px;
                        font-family: inherit;
                        font-size: 14px;
                        resize: vertical;
                        box-sizing: border-box;
                    "
                ></textarea>
                <div
                    style="
                        display: flex;
                        justify-content: space-between;
                        margin-top: 6px;
                        font-size: 12px;
                        opacity: 0.7;
                    "
                >
                    <span>Maximum 200 characters</span>
                    <span>0 / 200</span>
                </div>
            </div>

### Textarea Sizes

Small
Medium (Default)
Large
HTML

    <div
                style="
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    max-width: 400px;
                "
            >
                <!-- Small -->
                <div>
                    <label
                        style="display: block; margin-bottom: 6px; font-size: 13px"
                    >
                        Small
                    </label>
                    <textarea
                        class="textarea textarea--small"
                        rows="2"
                        placeholder="Small textarea..."
                        style="
                            width: 100%;
                            padding: 8px 10px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 6px;
                            font-family: inherit;
                            font-size: 13px;
                            resize: vertical;
                            box-sizing: border-box;
                        "
                    ></textarea>
                </div>
                <!-- Medium -->
                <div>
                    <label
                        style="display: block; margin-bottom: 6px; font-size: 14px"
                    >
                        Medium (Default)
                    </label>
                    <textarea
                        class="textarea"
                        rows="3"
                        placeholder="Medium textarea..."
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 8px;
                            font-family: inherit;
                            font-size: 14px;
                            resize: vertical;
                            box-sizing: border-box;
                        "
                    ></textarea>
                </div>
                <!-- Large -->
                <div>
                    <label
                        style="display: block; margin-bottom: 6px; font-size: 15px"
                    >
                        Large
                    </label>
                    <textarea
                        class="textarea textarea--large"
                        rows="5"
                        placeholder="Large textarea..."
                        style="
                            width: 100%;
                            padding: 16px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 10px;
                            font-family: inherit;
                            font-size: 16px;
                            resize: vertical;
                            box-sizing: border-box;
                        "
                    ></textarea>
                </div>
            </div>

### Textarea States

Focused
Disabled
Error This field is required
Success Valid content here ✓ Looks good!
HTML

    <div
                style="
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    max-width: 400px;
                "
            >
                <!-- Focus State -->
                <div>
                    <label style="display: block; margin-bottom: 6px">
                        Focused
                    </label>
                    <textarea
                        class="textarea focus"
                        rows="3"
                        placeholder="Focused textarea..."
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 2px solid var(--color_fill_primary);
                            border-radius: 8px;
                            font-family: inherit;
                            font-size: 14px;
                            resize: vertical;
                            box-sizing: border-box;
                            outline: none;
                            box-shadow: 0 0 0 3px
                                rgba(var(--color_fill_primary), 0.2);
                        "
                    ></textarea>
                </div>
                <!-- Disabled State -->
                <div>
                    <label
                        style="display: block; margin-bottom: 6px; opacity: 0.5"
                    >
                        Disabled
                    </label>
                    <textarea
                        class="textarea disabled"
                        rows="3"
                        disabled
                        placeholder="Disabled textarea..."
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 8px;
                            font-family: inherit;
                            font-size: 14px;
                            resize: vertical;
                            box-sizing: border-box;
                            background: var(--color_fill_secondary);
                            opacity: 0.6;
                            cursor: not-allowed;
                        "
                    ></textarea>
                </div>
                <!-- Error State -->
                <div>
                    <label style="display: block; margin-bottom: 6px">Error</label>
                    <textarea
                        class="textarea error"
                        rows="3"
                        placeholder="Error textarea..."
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 2px solid var(--color_state_error);
                            border-radius: 8px;
                            font-family: inherit;
                            font-size: 14px;
                            resize: vertical;
                            box-sizing: border-box;
                        "
                    ></textarea>
                    <span
                        style="
                            display: block;
                            margin-top: 6px;
                            font-size: 13px;
                            color: var(--color_state_error);
                        "
                    >
                        This field is required
                    </span>
                </div>
                <!-- Success State -->
                <div>
                    <label style="display: block; margin-bottom: 6px">
                        Success
                    </label>
                    <textarea
                        class="textarea success"
                        rows="3"
                        style="
                            width: 100%;
                            padding: 12px;
                            border: 2px solid var(--color_state_success);
                            border-radius: 8px;
                            font-family: inherit;
                            font-size: 14px;
                            resize: vertical;
                            box-sizing: border-box;
                        "
                    >
    Valid content here</textarea
                    >
                    <span
                        style="
                            display: block;
                            margin-top: 6px;
                            font-size: 13px;
                            color: var(--color_state_success);
                        "
                    >
                        ✓ Looks good!
                    </span>
                </div>
            </div>

### Resize Options

Vertical Resize
Horizontal Resize
No Resize
HTML

    <div
                style="
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                    gap: 20px;
                "
            >
                <!-- Vertical Resize -->
                <div>
                    <label
                        style="display: block; margin-bottom: 6px; font-size: 13px"
                    >
                        Vertical Resize
                    </label>
                    <textarea
                        rows="3"
                        placeholder="Resize vertically..."
                        style="
                            width: 100%;
                            padding: 10px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 6px;
                            font-family: inherit;
                            resize: vertical;
                            box-sizing: border-box;
                        "
                    ></textarea>
                </div>
                <!-- Horizontal Resize -->
                <div>
                    <label
                        style="display: block; margin-bottom: 6px; font-size: 13px"
                    >
                        Horizontal Resize
                    </label>
                    <textarea
                        rows="3"
                        placeholder="Resize horizontally..."
                        style="
                            width: 100%;
                            padding: 10px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 6px;
                            font-family: inherit;
                            resize: horizontal;
                            box-sizing: border-box;
                        "
                    ></textarea>
                </div>
                <!-- No Resize -->
                <div>
                    <label
                        style="display: block; margin-bottom: 6px; font-size: 13px"
                    >
                        No Resize
                    </label>
                    <textarea
                        rows="3"
                        placeholder="Cannot resize..."
                        style="
                            width: 100%;
                            padding: 10px;
                            border: 1px solid var(--color_line_secondary);
                            border-radius: 6px;
                            font-family: inherit;
                            resize: none;
                            box-sizing: border-box;
                        "
                    ></textarea>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!