To use the password component import the component in your JavaScript.
import '@cds/core/password/register.js';
<cds-password control-width="shrink"> <label>password</label> <input type="password" value="123456" /> </cds-password>
<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>
<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>
<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>