The password input component is used to accept password input from users. It is a text input field with a toggle button to show or hide the password.
Example
code
<script type="module">
import '@blueprintui/components/include/password.js';
</script>
<bp-field>
<label>password</label>
<bp-password value="123456"></bp-password>
</bp-field>
Vertical
message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="vertical">
<bp-field layout="vertical">
<label>label</label>
<bp-password value="123456"></bp-password>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="vertical">
<label>disabled</label>
<bp-password value="123456" disabled></bp-password>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="error">
<label>error</label>
<bp-password value="123456"></bp-password>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="success">
<label>success</label>
<bp-password value="123456"></bp-password>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>
Horizontal
message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-password value="123456"></bp-password>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="horizontal">
<label>disabled</label>
<bp-password value="123456" disabled></bp-password>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="error">
<label>error</label>
<bp-password value="123456"></bp-password>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="success">
<label>success</label>
<bp-password value="123456"></bp-password>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>
Compact
message textdisabled messageerror messagesuccess message
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-password value="123456"></bp-password>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="compact">
<label>disabled</label>
<bp-password value="123456" disabled></bp-password>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="error">
<label>error</label>
<bp-password value="123456"></bp-password>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="success">
<label>success</label>
<bp-password value="123456"></bp-password>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>
Install
NPM
import '@blueprintui/components/include/password.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/password.js/+esm';
</script>
Accessibility
- The password input component should be keyboard accessible
- It should have clear and descriptive labels for accessibility screen readers
- It should have a visible focus state to indicate its interactivity
bp-password
Events
Name | Types | Description |
---|
input | InputEvent | occurs when the value changes |
change | InputEvent | occurs when the value changes |
Properties
Name | Types | Description |
---|
type | string | string specifying the type of control to render |
i18n |
| set default aria/i18n strings |
value | string | number | FormData | File | control value |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
name | string | represents the name of the current |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |
formAssociated | boolean | |
valueAsNumber |
| |
composedLabel |
| |
focus |
| |
reset |
| |
Attributes
Name | Types | Description |
---|
type | string | string specifying the type of control to render |
i18n |
| set default aria/i18n strings |
value | string | number | FormData | File | control value |
disabled | boolean | determines if element is mutable or focusable |
required | boolean | indicates that the user must specify a value for the input before the owning form can be submitted |
readonly | boolean | makes the element not mutable, meaning the user can not edit the control |
multiple | boolean | determines he form control accepts one or more values |
autocomplete | string | provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field |
pattern | string | regular expression the form control's value should match |
placeholder | string | defines a short hint to help the user with data entry when a form control has no value |
minLength | number | defines minimum number of characters |
maxLength | number | defines maximum number of characters |
min | number | defines the most negative value in the range of permitted values |
max | number | defines the greatest value in the range of permitted values |
size | number | determines number of characters |
CSS Properties
Name | Types | Description |
---|
--background-size |
| |
--color |
| |
--background |
| |
--border |
| |
--border-radius |
| |
--outline |
| |
--outline-offset |
| |
--padding |
| |
--font-size |
| |
--line-height |
| |
--height |
| |
--min-width |
| |
--width |
| |
--transition |
| |
--text-align |
| |
--cursor |
| |
Slots
Name | Types | Description |
---|
prefix |
| slot for prefix text or icons |
suffix |
| slot for suffic text or icons |