Set height of lightning-textarea

Question

Hi I am building one custom LWC component and I need to set the height of the lightning-textarea

<template>
    <div class="slds-m-vertical_medium">
        <h1 class="slds-text-heading_small">Various Textarea Examples</h1>
        <p class="slds-text-body_regular">The following examples show various ways to create a textarea component.</p>
    </div>
    <div class="row">
        <h2 class="header">Basic Examples</h2>
        <lightning-textarea name="input1" label="Enter some text" ></lightning-textarea>
    </div>
</template>

I have tried custom class style attribute along with below but nothing can set the custom height. Any idea how to set the custom height to show more rows?

.slds-textarea{
line-height: 15rem;
height: 15rem !important;
}
.textarea-container slds-textarea{
    height: 15rem !important;
}
textarea{
    min-height: 15rem;
    height:15rem;
}

Answer 1

In my case I was using lightning-input-field within a lightning-record-edit-form for a textarea field - using a design token in the CSS file of the modal component I was building adjusted the textarea size without any further customizations needed:

:host {
   --sds-c-textarea-sizing-min-height: 200px;
}

Design token mentioned here: https://www.lightningdesignsystem.com/components/textarea/

Answer 2

I dont think this is possible in lightning-text area but you can simply use text area with slds class where you can specify rows attribute

<div class="slds-form-element">
<label class="slds-form-element__label" for="textarea-id-01">Textarea Label</label>
<div class="slds-form-element__control">
<textarea id="textarea-id-01" rows=10 class="slds-textarea" placeholder="Placeholder Text"></textarea>
</div>
</div>

Answer 3

Try this:

HTML:

<lightning-textarea class="textAreaBody"></lightning-textarea>

CSS:

.textAreaBody {
    --sds-c-textarea-sizing-min-height:175px;
}