Tangible Pattern Library

Form Field 

<div class="c-form-field">

    <div class="c-form-field__label">
        <label class="c-label" for="input-id">
            <span class="c-label__text">Form label</span>
        </label>
    </div>

    <div class="c-form-field__control">
        <div class="c-input">
            <input type="text" class="c-input__control" id="input-id" name="input-id">
        </div>
    </div>

    <p class="c-form-field__hint">Notes for the input field</p>

    <p class="c-form-field__error">Error message</p>

</div>
 
<div class="c-form-field{% if modifier is defined %} {{ modifier }}{% endif %}">
  
  <div class="c-form-field__label">
    {% include "@label" with {
      modifier: label.modifier,
      required: label.required,
      text: label.text,
      id: input.id,
    } %}
  </div>

  <div class="c-form-field__control">
    {% include "@input" with {
       type: input.type,
       id: input.id,
       name: input.name is defined ? input.name : input.id,
       required: input.required|default(false)
    } %}
  </div>
  
  {% if hintText is defined %}
  <p class="c-form-field__hint">{{ hintText }}</p>
  {% endif %}
  
  {% if errorText is defined %}
  <p class="c-form-field__error">{{ errorText }}</p>
  {% endif %}

</div>
 
/* No context defined. */
  • Content: 
    .c-form-field__label {
  margin-bottom: spacing(space-4);
}

.c-form-field__hint,
.c-form-field__error {
  @include font-scale(level-1, $font-secondary, regular);
}

.c-form-field__hint {
  margin-top: spacing(space-4);
  color: useHSL(--primary-100);
}

.c-form-field__error {
  color: useHSL(--accent-100);
}
  • URL: /components/raw/form-field/_form-field.scss
  • Filesystem Path: src/pattern-library/02-components/form-field/_form-field.scss
  • Size: 310 Bytes

No notes defined.