input telephone
The telephone input element let the user enter and edit a telephone number.
According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the telephone 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 telephone
- input telephone disabled
- input telephone readonly
- input telephone with label
- input telephone with label disabled
- input telephone with label readonly
- input telephone with very long label
- input telephone with very long label disabled
- input telephone with very long label readonly
- input telephone with placeholder
- input telephone with placeholder disabled
- input telephone with placeholder readonly
- input telephone with placeholder and label
- input telephone with placeholder and label disabled
- input telephone with placeholder and label readonly
- style scss
component variations
input telephone
<div class="a-telephone-input">
<input type="tel" id="telephone-input-1" name="input telephone" />
</div>
input telephone disabled
<div class="a-telephone-input">
<input
type="tel"
id="telephone-input-2"
name="input telephone disabled"
disabled=""
/>
</div>
input telephone readonly
<div class="a-telephone-input">
<input
type="tel"
id="telephone-input-3"
name="input telephone readonly"
readonly=""
/>
</div>
input telephone with label
<div class="a-telephone-input">
<label for="telephone-input-4">Phone no.</label>
<input type="tel" id="telephone-input-4" name="input telephone with label" />
</div>
input telephone with label disabled
<div class="a-telephone-input">
<label for="telephone-input-5">Phone no.</label>
<input
type="tel"
id="telephone-input-5"
name="input telephone with label disabled"
disabled=""
/>
</div>
input telephone with label readonly
<div class="a-telephone-input">
<label for="telephone-input-6">Phone no.</label>
<input
type="tel"
id="telephone-input-6"
name="input telephone with label readonly"
readonly=""
/>
</div>
input telephone with very long label
<div class="a-telephone-input">
<label for="telephone-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="tel"
id="telephone-input-7"
name="input telephone with very long label"
/>
</div>
input telephone with very long label disabled
<div class="a-telephone-input">
<label for="telephone-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="tel"
id="telephone-input-8"
name="input telephone with very long label disabled"
disabled=""
/>
</div>
input telephone with very long label readonly
<div class="a-telephone-input">
<label for="telephone-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="tel"
id="telephone-input-9"
name="input telephone with very long label readonly"
readonly=""
/>
</div>
input telephone with placeholder
<div class="a-telephone-input">
<input
type="tel"
id="telephone-input-10"
name="input telephone with placeholder"
placeholder="e.g.: hint"
/>
</div>
input telephone with placeholder disabled
<div class="a-telephone-input">
<input
type="tel"
id="telephone-input-11"
name="input telephone with placeholder disabled"
placeholder="e.g.: hint"
disabled=""
/>
</div>
input telephone with placeholder readonly
<div class="a-telephone-input">
<input
type="tel"
id="telephone-input-12"
name="input telephone with placeholder readonly"
placeholder="e.g.: hint"
readonly=""
/>
</div>
input telephone with placeholder and label
<div class="a-telephone-input">
<label for="telephone-input-13">Phone no.</label>
<input
type="tel"
id="telephone-input-13"
name="input telephone with placeholder and label"
placeholder="e.g.: hint"
/>
</div>
input telephone with placeholder and label disabled
<div class="a-telephone-input">
<label for="telephone-input-14">Phone no.</label>
<input
type="tel"
id="telephone-input-14"
name="input telephone with placeholder and label disabled"
placeholder="e.g.: hint"
disabled=""
/>
</div>
input telephone with placeholder and label readonly
<div class="a-telephone-input">
<label for="telephone-input-15">Phone no.</label>
<input
type="tel"
id="telephone-input-15"
name="input telephone with placeholder and label readonly"
placeholder="e.g.: hint"
readonly=""
/>
</div>
additional content
styles SCSS
.a-telephone-input {
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%;
&[readonly],
&: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):not(:read-only) {
background-color: var(--neutral__enabled__fill__hovered);
}
&:active:not(:disabled):not(: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 1rem;
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;
}
}
}
}