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

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

Password

password

       <cds-password control-width="shrink">
    <label>password</label>
    <input type="password" value="123456" />
</cds-password>
      

Vertical

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

       <cds-form-group layout="vertical">
    <cds-password layout="vertical">
        <label>label</label>
        <input type="password" value="123456" />
        <cds-control-message>message text</cds-control-message>
    </cds-password>

    <cds-password layout="vertical">
        <label>disabled</label>
        <input type="password" value="123456" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-password>

    <cds-password layout="vertical" status="error">
        <label>error</label>
        <input type="password" value="123456" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-password>

    <cds-password layout="vertical" status="success">
        <label>success</label>
        <input type="password" value="123456" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-password>
</cds-form-group>
      

Horizontal

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

       <cds-form-group layout="horizontal">
    <cds-password layout="horizontal">
        <label>label</label>
        <input type="password" value="123456" />
        <cds-control-message>message text</cds-control-message>
    </cds-password>

    <cds-password layout="horizontal">
        <label>disabled</label>
        <input type="password" value="123456" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-password>

    <cds-password layout="horizontal" status="error">
        <label>error</label>
        <input type="password" value="123456" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-password>

    <cds-password layout="horizontal" status="success">
        <label>success</label>
        <input type="password" value="123456" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-password>
</cds-form-group>
      

Compact

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

       <cds-form-group layout="compact">
    <cds-password layout="compact">
        <label>label</label>
        <input type="password" value="123456" />
        <cds-control-message>message text</cds-control-message>
    </cds-password>

    <cds-password layout="compact">
        <label>disabled</label>
        <input type="password" value="123456" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-password>

    <cds-password layout="compact" status="error">
        <label>error</label>
        <input type="password" value="123456" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-password>

    <cds-password layout="compact" status="success">
        <label>success</label>
        <input type="password" value="123456" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-password>
</cds-form-group>
      

DarkTheme

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

       <cds-form-group layout="horizontal" cds-theme="dark">
    <cds-password layout="horizontal">
        <label>label</label>
        <input type="password" value="123456" />
        <cds-control-message>message text</cds-control-message>
    </cds-password>

    <cds-password layout="horizontal">
        <label>disabled</label>
        <input type="password" value="123456" disabled />
        <cds-control-message>disabled message</cds-control-message>
    </cds-password>

    <cds-password layout="horizontal" status="error">
        <label>error</label>
        <input type="password" value="123456" />
        <cds-control-message status="error">error message</cds-control-message>
    </cds-password>

    <cds-password layout="horizontal" status="success">
        <label>success</label>
        <input type="password" value="123456" />
        <cds-control-message status="success">success message</cds-control-message>
    </cds-password>
</cds-form-group>