input password
The password input element let the user enter a password.
According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the password input.
This component works with all its features only in browsers that have support for the
If you need to run this component in a browser with no support for the
:has
CSS selector. Please refer to the
reference on MDN.
If you need to run this component in a browser with no support for the
:has
CSS selector, please use the
FROK Release 3.6.x.
table of content
- description
- component variations
- input password
- input password disabled
- input password readonly
- input password with label
- input password with label disabled
- input password with label readonly
- input password with very long label
- input password with very long label disabled
- input password with very long label readonly
- input password with placeholder
- input password with placeholder disabled
- input password with placeholder readonly
- input password with placeholder and label
- input password with placeholder and label disabled
- input password with placeholder and label readonly
- confirm password example
- style scss
component variations
input password
<div class="a-password-input">
<input type="password" id="password-input-1" name="input password" />
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password disabled
<div class="a-password-input">
<input
type="password"
id="password-input-2"
name="input password disabled"
disabled=""
/>
<button
type="button"
class="a-password-input__icon-password"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password readonly
<div class="a-password-input">
<input
type="password"
id="password-input-3"
name="input password readonly"
readonly=""
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with label
<div class="a-password-input">
<label for="password-input-4">label</label>
<input
type="password"
id="password-input-4"
name="input password with label"
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with label disabled
<div class="a-password-input">
<label for="password-input-5">label</label>
<input
type="password"
id="password-input-5"
name="input password with label disabled"
disabled=""
/>
<button
type="button"
class="a-password-input__icon-password"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with label readonly
<div class="a-password-input">
<label for="password-input-6">label</label>
<input
type="password"
id="password-input-6"
name="input password with label readonly"
readonly=""
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with very long label
<div class="a-password-input">
<label for="password-input-7">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="password"
id="password-input-7"
name="input password with very long label"
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with very long label disabled
<div class="a-password-input">
<label for="password-input-8">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="password"
id="password-input-8"
name="input password with very long label disabled"
disabled=""
/>
<button
type="button"
class="a-password-input__icon-password"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with very long label readonly
<div class="a-password-input">
<label for="password-input-9">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
consequatur distinctio provident voluptatum nisi recusandae quod asperiores
quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
</label>
<input
type="password"
id="password-input-9"
name="input password with very long label readonly"
readonly=""
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with placeholder
<div class="a-password-input">
<input
type="password"
id="password-input-10"
name="input password with placeholder"
placeholder="e.g.: hint"
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with placeholder disabled
<div class="a-password-input">
<input
type="password"
id="password-input-11"
name="input password with placeholder disabled"
placeholder="e.g.: hint"
disabled=""
/>
<button
type="button"
class="a-password-input__icon-password"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with placeholder readonly
<div class="a-password-input">
<input
type="password"
id="password-input-12"
name="input password with placeholder readonly"
placeholder="e.g.: hint"
readonly=""
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with placeholder and label
<div class="a-password-input">
<label for="password-input-13">label</label>
<input
type="password"
id="password-input-13"
name="input password with placeholder and label"
placeholder="e.g.: hint"
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with placeholder and label disabled
<div class="a-password-input">
<label for="password-input-14">label</label>
<input
type="password"
id="password-input-14"
name="input password with placeholder and label disabled"
placeholder="e.g.: hint"
disabled=""
/>
<button
type="button"
class="a-password-input__icon-password"
disabled=""
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
input password with placeholder and label readonly
<div class="a-password-input">
<label for="password-input-15">label</label>
<input
type="password"
id="password-input-15"
name="input password with placeholder and label readonly"
placeholder="e.g.: hint"
readonly=""
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
confirm password example
Set a new Password
<style>
.frontend-kit-example_password {
display: flex;
flex-direction: column;
min-width: 18rem;
}
.frontend-kit-example_password > * {
margin-bottom: 1rem;
}
.frontend-kit-example_password h5 {
margin-top: 0;
}
.frontend-kit-example_password button {
align-self: end;
margin-bottom: 0;
width: fit-content;
}
</style>
<div class="frontend-kit-example_password">
<div class="-size-l highlight">Set a new Password</div>
<div class="a-password-input">
<label for="password-input-160">Password</label>
<input type="password" id="password-input-160" name="add-password" />
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
<div class="a-password-input">
<label for="password-input-170">Confirm Password</label>
<input type="password" id="password-input-170" name="confirm-password" />
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
<button type="button" class="a-button a-button--primary -without-icon">
<span class="a-button__label">Update Password</span>
</button>
</div>
additional content
styles SCSS
.a-password-input {
display: flex;
height: 3rem;
position: relative;
width: auto;
input {
background-color: var(--neutral__enabled__fill__default);
border: 0;
border-bottom: 0.0625rem solid var(--neutral__enabled__front__default);
color: var(--neutral__enabled__front__default);
height: 3rem;
padding: 0 1rem;
width: 100%;
&::-ms-reveal,
&::-ms-clear {
display: none;
}
&[readonly],
&[readonly] ~ .a-password-input__icon-password,
&:focus[readonly] {
background-color: var(--plain__enabled__fill__default);
pointer-events: none;
}
&::placeholder {
color: var(--plain__enabled__front__default);
opacity: 0.5;
}
&:hover:not(:disabled, :read-only) {
background-color: var(--neutral__enabled__fill__hovered);
}
&:active:not(:disabled, :read-only) {
background-color: var(--neutral__enabled__fill__pressed);
}
&:focus {
background-color: var(--neutral__focused__fill__default);
border-bottom-color: var(--neutral__focused__front__default);
}
&:focus-visible {
border: 3px solid var(--plain__enabled__front__default);
outline: 3px solid var(--background);
outline-offset: -6px;
padding-inline: 13px;
padding-block-end: 1px;
}
&:disabled {
border-bottom-color: var(--neutral__disabled__front__default);
background-color: var(--neutral__disabled__fill__default);
pointer-events: none;
&::placeholder {
color: var(--neutral__disabled__front__default);
}
}
}
label {
margin: 0.25rem 1rem auto;
max-width: calc(100% - 4rem);
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
white-space: nowrap;
&:has(~ input:disabled) {
color: var(--neutral__disabled__front__default);
}
+ input {
padding-top: 1.125rem;
padding-bottom: 0.3125rem;
&:focus-visible {
padding-block-end: 0.375rem;
}
}
}
&__icon-password {
border: 0;
cursor: pointer;
background-color: var(--neutral__enabled__fill__default);
color: var(--neutral__enabled__front__default);
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-bottom: 0.0625rem solid var(--neutral__enabled__front__default);
&:hover {
background-color: var(--neutral__enabled__fill__hovered);
}
&:active {
background-color: var(--neutral__enabled__fill__pressed);
}
&:focus-visible {
@include focus-inside;
}
&:disabled {
color: var(--neutral__disabled__front__default);
border-bottom-color: var(--neutral__disabled__front__default);
background-color: var(--neutral__disabled__fill__default);
pointer-events: none;
}
}
}