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.

The password variant features a control that will show the password to the user. Note that this will not have any impact on the data transmitted.

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" /></div>

Input text disabled

Open on blank page
<div class="a-text-field">
  <input type="text" id="text-input-2" disabled="" />
</div>

Input text label

Open on blank page
<div class="a-text-field">
  <label for="3">Label</label>
  <input type="text" id="text-input-3" />
</div>

Input text label readonly

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

Input text label disabled

Open on blank page
<div class="a-text-field">
  <label for="5">Label</label>
  <input type="text" id="text-input-5" disabled="" />
</div>

Input text very long label

Open on blank page
<div class="a-text-field">
  <label for="6">
    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-6" />
</div>

Input text label and placeholder

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

Input text placeholder

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

input text integrated

Open on blank page
<div class="a-text-field a-text-field--integrated">
  <input type="text" id="text-input-9" />
  <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 with placeholder

Open on blank page
<div class="a-text-field a-text-field--integrated">
  <input type="text" id="text-input-10" 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>

input text integrated readonly

Open on blank page
<div class="a-text-field a-text-field--integrated">
  <input type="text" id="text-input-11" readonly="" value="John Doe" />
  <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-12" disabled="" value="John Doe" />
  <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 {
  position: relative;
  height: 3rem;
  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],
    &:hover[readonly],
    &:active[readonly],
    &:focus[readonly],
    &:disabled[readonly] {
      background-color: var(--plain__enabled__fill__default);
      pointer-events: none;
    }

    &::placeholder {
      color: var(--plain__enabled__front__default);
      opacity: 0.5;
    }

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

    &:active {
      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);
      color: var(--neutral__disabled__front__default);
      pointer-events: none;

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

  label {
    position: absolute;
    margin: 0.25rem 1rem auto 1rem;
    font-size: 0.75rem;
    max-width: calc(100% - 4rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &: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;
      }
    }
  }

  &--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;
      }

      &:has(~ .a-text-field__icon-close:focus-visible) {
        color: var(--integrated__enabled__front__default);
      }

      &[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,
      &:focus-visible {
        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 {
          color: var(--integrated__disabled__front__default);
          background-color: var(--integrated__disabled__fill__default);
          pointer-events: none;
        }
      }

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

        &:focus-visible {
          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);
        }
      }

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