To use the textarea component import the component in your JavaScript.

import '@cds/core/textarea/register.js';

Textarea

textarea message text

       <cds-textarea control-width="shrink">
    <label>textarea</label>
    <textarea></textarea>
    <cds-control-message>message text</cds-control-message>
</cds-textarea>
      

Vertical

label message text disabled disabled message error status error message success status success message

       <cds-form-group layout="vertical">
    <cds-textarea layout="vertical">
        <label>label</label>
        <textarea></textarea>
        <cds-control-message>message text</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="vertical">
        <label>disabled</label>
        <textarea disabled></textarea>
        <cds-control-message>disabled message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="vertical" status="error">
        <label>error status</label>
        <textarea></textarea>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="vertical" status="success">
        <label>success status</label>
        <textarea></textarea>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-textarea>
</cds-form-group>
      

Horizontal

label message text disabled disabled message error status error message success status success message

       <cds-form-group layout="horizontal">
    <cds-textarea layout="horizontal">
        <label>label</label>
        <textarea></textarea>
        <cds-control-message>message text</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="horizontal">
        <label>disabled</label>
        <textarea disabled></textarea>
        <cds-control-message>disabled message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="horizontal" status="error">
        <label>error status</label>
        <textarea></textarea>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="horizontal" status="success">
        <label>success status</label>
        <textarea></textarea>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-textarea>
</cds-form-group>
      

Compact

label message text disabled disabled message error status error message success status success message

       <cds-form-group layout="compact">
    <cds-textarea layout="compact">
        <label style="max-width: 180px">label</label>
        <textarea></textarea>
        <cds-control-message>message text</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="compact">
        <label>disabled</label>
        <textarea disabled></textarea>
        <cds-control-message>disabled message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="compact" status="error">
        <label>error status</label>
        <textarea></textarea>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="compact" status="success">
        <label>success status</label>
        <textarea></textarea>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-textarea>
</cds-form-group>
      

DarkTheme

label message text disabled disabled message error status error message success status success message

       <cds-form-group layout="horizontal" cds-theme="dark">
    <cds-textarea layout="horizontal">
        <label>label</label>
        <textarea></textarea>
        <cds-control-message>message text</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="horizontal">
        <label>disabled</label>
        <textarea disabled></textarea>
        <cds-control-message>disabled message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="horizontal" status="error">
        <label>error status</label>
        <textarea></textarea>
        <cds-control-message status="error">error message</cds-control-message>
    </cds-textarea>

    <cds-textarea layout="horizontal" status="success">
        <label>success status</label>
        <textarea></textarea>
        <cds-control-message status="success">success message</cds-control-message>
    </cds-textarea>
</cds-form-group>