Pattern Library

Text Input Field

  • 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