• Handle: @text-input-field
  • Preview:
  • Filesystem Path: components/02-atoms/04-text-input-field/text-input-field.njk

Guidelines

To do

  • Need to add hover colour to the border - using the updated colours added to the vars css files
  • Also need to solidify the border
  • Do this to adhere to GDS accessibility standards
<div class="lbh-text-input-field">
    <label class="lbh-label" for="name">
    Full Name
  </label>
    <input class="lbh-input" type="text">
</div>
  • Content:
    .lbh-label { 
      font-family: var(--font-family-main);
      -webkit-font-smoothing: antialiased;
      font-weight: 400;
      font-size: var(--font-size-heading-small);
      color: var(--colour-main);
      display: block;
      margin-bottom: 5px;
    }
    
    .lbh-input {
      font-family: var(--font-family-main);
      -webkit-font-smoothing: antialiased;
      font-weight: 400;
      font-size: var(--font-size-heading-small);
      line-height: 1.25;
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      margin-top: 0;
      padding: 5px;
      border: 2px solid var(--colour-main);
      border-radius: 0;
      -webkit-appearance: none;
      display: block;
    }
    
    .lbh-input:focus {
      outline: 3px solid var(--focus-button);
      outline-offset: 0;
    }
  • URL: /components/raw/text-input-field/text-input-field.css
  • Filesystem Path: components/02-atoms/04-text-input-field/text-input-field.css
  • Size: 690 Bytes