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 :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

component variations

input telephone

Open on blank page
<div class="a-telephone-input">
  <input
    type="tel"
    id="telephone-input-1"
    name="input telephone"
    value="0711 40040990"
  />
</div>

input telephone readonly

Open on blank page
<div class="a-telephone-input">
  <input
    type="tel"
    id="telephone-input-2"
    name="input telephone readonly"
    readonly=""
    value="0711 40040990"
  />
</div>

input telephone disabled

Open on blank page
<div class="a-telephone-input">
  <input
    type="tel"
    id="telephone-input-3"
    name="input telephone disabled"
    disabled=""
    value="0711 40040990"
  />
</div>

input telephone with label

Open on blank page
<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"
    value="0711 40040990"
  />
</div>

input telephone with label readonly

Open on blank page
<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 readonly"
    readonly=""
    value="0711 40040990"
  />
</div>

input telephone with label disabled

Open on blank page
<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 disabled"
    disabled=""
    value="0711 40040990"
  />
</div>

input telephone with very long label

Open on blank page
<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"
    value="0711 40040990"
  />
</div>

input telephone with very long label readonly

Open on blank page
<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 readonly"
    readonly=""
    value="0711 40040990"
  />
</div>

input telephone with very long label disabled

Open on blank page
<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 disabled"
    disabled=""
    value="0711 40040990"
  />
</div>

input telephone with placeholder

Open on blank page
<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 readonly

Open on blank page
<div class="a-telephone-input">
  <input
    type="tel"
    id="telephone-input-11"
    name="input telephone with placeholder readonly"
    placeholder="e.g.: hint"
    readonly=""
  />
</div>

input telephone with placeholder disabled

Open on blank page
<div class="a-telephone-input">
  <input
    type="tel"
    id="telephone-input-12"
    name="input telephone with placeholder disabled"
    placeholder="e.g.: hint"
    disabled=""
  />
</div>

input telephone with placeholder and label

Open on blank page
<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 readonly

Open on blank page
<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>

input telephone with placeholder and label disabled

Open on blank page
<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>

additional content

styles SCSS

.a-telephone-input {
  @include text-field;
}