input text

The input text element can be used for single-line input. It features an optional label and an optional placeholder as well as success, error and warning states.

See Form for example usage in a form.

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.
In order for the label to work correctly, the input tag needs a unique id attribute and the label tag needs the same for attribute.
According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the input text.
Password and Search variants are removed and are now located in it's own components. Please use Input Password and Input Search components.

Usage of the "integrated variant"

The integrated variant of the inputText component, can not be used as a standalone component. The variant needs to be implemented into other components, e.g. Menu Item List

Also a label is mandatory to use with the integrated variant
table of content

component variations

input text

Open on blank page
<div class="a-text-field">
  <input type="text" id="text-input-1" name="input text" value="Sample text" />
</div>

input text readonly

Open on blank page
<div class="a-text-field">
  <input
    type="text"
    id="text-input-2"
    name="input text readonly"
    readonly=""
    value="Sample text"
  />
</div>

Input text disabled

Open on blank page
<div class="a-text-field">
  <input
    type="text"
    id="text-input-3"
    name="Input text disabled"
    disabled=""
    value="Sample text"
  />
</div>

input text with label

Open on blank page
<div class="a-text-field">
  <label for="text-input-4">Label</label>
  <input
    type="text"
    id="text-input-4"
    name="input text with label"
    value="Sample text"
  />
</div>

input text with label readonly

Open on blank page
<div class="a-text-field">
  <label for="text-input-5">Label</label>
  <input
    type="text"
    id="text-input-5"
    name="input text with label readonly"
    readonly=""
    value="Sample text"
  />
</div>

input text with label disabled

Open on blank page
<div class="a-text-field">
  <label for="text-input-6">Label</label>
  <input
    type="text"
    id="text-input-6"
    name="input text with label disabled"
    disabled=""
    value="Sample text"
  />
</div>

input text with very long label

Open on blank page
<div class="a-text-field">
  <label for="text-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="text"
    id="text-input-7"
    name="input text with very long label"
    value="Sample text"
  />
</div>

input text with very long label readonly

Open on blank page
<div class="a-text-field">
  <label for="text-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="text"
    id="text-input-8"
    name="input text with very long label readonly"
    readonly=""
    value="Sample text"
  />
</div>

input text with very long label disabled

Open on blank page
<div class="a-text-field">
  <label for="text-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="text"
    id="text-input-9"
    name="input text with very long label disabled"
    disabled=""
    value="Sample text"
  />
</div>

input text with placeholder

Open on blank page
<div class="a-text-field">
  <input
    type="text"
    id="text-input-10"
    name="input text with placeholder"
    placeholder="Type something"
  />
</div>

input text with placeholder readonly

Open on blank page
<div class="a-text-field">
  <input
    type="text"
    id="text-input-11"
    name="input text with placeholder readonly"
    placeholder="Type something"
    readonly=""
  />
</div>

input text with placeholder disabled

Open on blank page
<div class="a-text-field">
  <input
    type="text"
    id="text-input-12"
    name="input text with placeholder disabled"
    placeholder="Type something"
    disabled=""
  />
</div>

input text with placeholder and label

Open on blank page
<div class="a-text-field">
  <label for="text-input-13">Label</label>
  <input
    type="text"
    id="text-input-13"
    name="input text with placeholder and label"
    placeholder="Type something"
  />
</div>

input text with placeholder and label readonly

Open on blank page
<div class="a-text-field">
  <label for="text-input-14">Label</label>
  <input
    type="text"
    id="text-input-14"
    name="input text with placeholder and label readonly"
    placeholder="Type something"
    readonly=""
  />
</div>

input text with placeholder and label disabled

Open on blank page
<div class="a-text-field">
  <label for="text-input-15">Label</label>
  <input
    type="text"
    id="text-input-15"
    name="input text with placeholder and label disabled"
    placeholder="Type something"
    disabled=""
  />
</div>

input text integrated

Open on blank page
<div class="a-text-field a-text-field--integrated">
  <input
    type="text"
    id="text-input-16"
    name="input text integrated"
    value="Sample text"
  />
  <button type="button" class="a-text-field__icon-edit" aria-label="LoremIpsum">
    <i class="a-icon boschicon-bosch-ic-edit"></i>
  </button>
  <button
    type="button"
    class="a-text-field__icon-close"
    aria-label="LoremIpsum"
  >
    <i class="a-icon ui-ic-close-small"></i>
  </button>
</div>

input text integrated readonly

Open on blank page
<div class="a-text-field a-text-field--integrated">
  <input
    type="text"
    id="text-input-17"
    name="input text integrated readonly"
    readonly=""
    value="Sample text"
  />
  <button type="button" class="a-text-field__icon-edit" aria-label="LoremIpsum">
    <i class="a-icon boschicon-bosch-ic-edit"></i>
  </button>
  <button
    type="button"
    class="a-text-field__icon-close"
    aria-label="LoremIpsum"
  >
    <i class="a-icon ui-ic-close-small"></i>
  </button>
</div>

input text integrated disabled

Open on blank page
<div class="a-text-field a-text-field--integrated">
  <input
    type="text"
    id="text-input-18"
    name="input text integrated disabled"
    disabled=""
    value="Sample text"
  />
  <button
    type="button"
    class="a-text-field__icon-edit"
    disabled=""
    aria-label="LoremIpsum"
  >
    <i class="a-icon boschicon-bosch-ic-edit"></i>
  </button>
  <button
    type="button"
    class="a-text-field__icon-close"
    aria-label="LoremIpsum"
  >
    <i class="a-icon ui-ic-close-small"></i>
  </button>
</div>

input text integrated with placeholder

Open on blank page
<div class="a-text-field a-text-field--integrated">
  <input
    type="text"
    id="text-input-19"
    name="input text integrated with placeholder"
    placeholder="Place your name here"
  />
  <button type="button" class="a-text-field__icon-edit" aria-label="LoremIpsum">
    <i class="a-icon boschicon-bosch-ic-edit"></i>
  </button>
  <button
    type="button"
    class="a-text-field__icon-close"
    aria-label="LoremIpsum"
  >
    <i class="a-icon ui-ic-close-small"></i>
  </button>
</div>

additional content

Event API

Event Handlers can be registered by calling component.addEventListener(name, callback). They can be removed by calling component.removeEventListener(name, callback) with the same arguments. Also, addEventListener returns an unsubscription function that, once called, achieves the same.

Event Name parameters description
onClear (integrated variant only) none Will be triggered when the clear button is clicked. The component will loose focus. This event can be used to put the focus on a different element

styles SCSS

/* stylelint-disable no-descending-specificity */
.a-text-field {
  @include text-field;

  &--integrated {
    input {
      color: var(--integrated__enabled__front__default);
      background-color: var(--integrated__enabled__fill__default);
      border-bottom: none;
      padding-inline: 5px 32px;

      &:focus-visible {
        padding-inline: 3px 32px;
        padding-block-end: 0;
      }

      &[readonly],
      &:hover[readonly],
      &:active[readonly],
      &:focus[readonly],
      &:disabled[readonly] {
        background-color: var(--integrated__enabled__fill__default);

        ~.a-text-field__icon-edit {
          display: none;
        }
      }

      &::placeholder {
        color: var(--integrated__enabled__front__default);
      }

      &:hover {
        color: var(--integrated__enabled__front__hovered);
        background-color: var(--integrated__enabled__fill__hovered);

        &::placeholder {
          color: var(--integrated__enabled__front__hovered);
        }

        ~.a-text-field__icon-edit {
          color: var(--integrated__enabled__front__hovered);
          background-color: var(--integrated__enabled__fill__hovered);
        }
      }

      &:active {
        color: var(--integrated__enabled__front__pressed);
        background-color: var(--integrated__enabled__fill__pressed);

        &::placeholder {
          color: var(--integrated__enabled__front__pressed);
        }
      }

      &:focus {
        color: var(--integrated__enabled__front__default);
        background-color: var(--integrated__enabled__fill__default);

        &::placeholder {
          color: var(--integrated__enabled__front__default);
        }
      }

      &:disabled {
        color: var(--integrated__disabled__front__default);
        background-color: var(--integrated__disabled__fill__default);

        &::placeholder {
          color: var(--integrated__disabled__front__default);
        }
      }

      ~.a-text-field__icon-edit,
      ~.a-text-field__icon-close {
        color: var(--integrated__enabled__front__default);
        background-color: var(--integrated__enabled__fill__default);
        padding-inline: 0.5rem 0;
        position: absolute;
        right: 0;
        border-bottom: none;
        width: auto;

        &:focus-visible {
          outline: none;

          &::after {
            outline: none;
          }

          .a-icon {
            @include focus-inside;
          }
        }

        &:hover {
          color: var(--integrated__enabled__front__hovered);
          background-color: var(--integrated__enabled__fill__hovered);
        }

        &:active {
          color: var(--integrated__enabled__front__pressed);
          background-color: var(--integrated__enabled__fill__pressed);
        }

        &:disabled {
          color: var(--integrated__disabled__front__default);
          background-color: var(--integrated__disabled__fill__default);
          pointer-events: none;
        }
      }

      ~.a-text-field__icon-close {
        display: none;
      }
    }
  }
}