Textarea

Default browser textarea are replaced with a custom styled textarea component with help of .textarea, a series of classes that improves the look and feel of the textarea.

Structurally .textarea element contains the .textarea__control element.

HTML

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="textarea">
                <textarea 
                    id="comment" 
                    name="comment"
                    placeholder="some content"
                    class="textarea__control">
                </textarea>
            </div>
        </div>
    </div>
</div>


## Disabled textarea

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="textarea textarea_disabled">
                <textarea 
                    id="comment" 
                    name="comment"
                    disabled
                    class="textarea__control">
                        t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                </textarea>
            </div>
        </div>
    </div>
</div>

```html title="HTML"
<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="textarea textarea_disabled">
                <textarea 
                    id="comment" 
                    name="comment"
                    disabled
                    class="textarea__control">
                        t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                </textarea>
            </div>
        </div>
    </div>
</div>

Textarea with errors

t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

HTML

<div class="control">
    <div class="control__content">
        <div class="control__element">
            <div class="textarea textarea_error">
                <textarea 
                    id="comment" 
                    name="comment"
                    class="textarea__control">
                        t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                </textarea>
            </div>
        </div>
    </div>
</div>

LESS

You can modify any textarea less variable in your User Less section to change textarea styles.

textarea variables

Variables used to style textarea.

@textareaTransition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
@textareaMinHeight: 100;

@textareaPadding: 1;

@textareaWrapperGutter: @globalSpacing * 0.5;

@textareaBorderWidth: 1px;
@textareaBorderStyle: solid;
@textareaBorderColor: @controlBorderColor;
@textareaBorderRadius: @controlBorderRadius;
@textareaBorderColorHover: @neutralColors800;
@textareaBorderColorFocus: @primaryColor;
@textareaBackgroundColor: @controlBgcolor;

@textareaBoxShadowColorFocus: @primaryColors300;
@textareaBoxShadowFocus: 0 0 0 2px @textareaBoxShadowColorFocus;

@textareaFontSizeInPxS: @fontSizeInPxS;
@textareaLineHeightInPxS: @lineHeightInPxS;

@textareaControlPaddingTopM: 9;
@textareaControlPaddingRightM: 12;
@textareaControlPaddingBottomM: 9;
@textareaControlPaddingLeftM: 12;

@textareaBorderColorDisabled: @neutralColors100;
@textareaBackgroundColorDisabled: @neutralColors100;
@textareaColorDisabled: @neutralColors500;

@textareaBorderColorError: @errorColors500;
@textareaBoxShadowError: inset 0 0 0px 1px @textareaBorderColorError;
@textareaColorError: @errorColors500;

If you want to change textarea styles, you can just change the variables. To change default border-radius just modify @textareaBorderRadius variable.

@textareaLabelBorderRadius: 10px;

textarea styles

Standard textarea styles.

.textarea {
    transition: @textareaTransition;

    display: flex;
    width: 100%;
    align-items: center;

    border: @textareaBorderWidth @textareaBorderStyle @textareaBorderColor;
    border-radius: ~'@{textareaBorderRadius}px';
    column-gap: @textareaWrapperGutter;

    .padding-all-to-unit(@textareaPadding);

    .font-size(@textareaFontSizeInPxS);
    .line-height(@textareaLineHeightInPxS);

    color: @globalFontColor;
    -webkit-text-fill-color: @globalFontColor;

    &:hover {
        border-color: @textareaBorderColorHover;
    }

    &:focus-within {
        box-shadow: @textareaBoxShadowFocus;
        border-color: @textareaBorderColorFocus;
    }

    &_disabled {
        border-color: @textareaBorderColorDisabled;
        background-color: @textareaBackgroundColorDisabled;
        color: @textareaColorDisabled;
        pointer-events: none;
    }

    &_error {
        border-color: @textareaBorderColorError;
        box-shadow: @textareaBoxShadowError;
    }

    &__control,
    textarea {
        display: flex;
        flex: 1 0 auto;
        outline: 0;
        background-color: @textareaBackgroundColor;

        .pixel-to-rem(min-height, @textareaMinHeight);
        .font-size(@textareaFontSizeInPxS);
        .line-height(@textareaLineHeightInPxS);
    }

    textarea {
        .padding-to-unit(@textareaControlPaddingTopM, @textareaControlPaddingRightM, @textareaControlPaddingBottomM, @textareaControlPaddingLeftM);
        font-family: @globalBodyFontFamilyName, Arial;
    }
}