[SalesForce] Set height of lightning-textarea

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;
}

Best Answer

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/

Related Topic