Copy environment

Textfield

<div class="form-textfield  ">
    <div class="form-textfield__inner">
        <input type="text" class="form-textfield__input" id="text1" name="" value="">
        <label class="form-textfield__label" for="text1">Textfield label</label>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "label": "Textfield label",
    "id": "text1"
  }
}

Invalid

<div class="form-textfield   is-invalid">
    <div class="form-textfield__inner">
        <input type="text" class="form-textfield__input" id="text1" name="" value="info2play.ee">
        <label class="form-textfield__label" for="text1">Textfield label</label>
    </div>
    <div class="form-textfield__error">
        Please check your input
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "label": "Textfield label",
    "id": "text1",
    "isInvalid": true,
    "error": "Please check your input",
    "value": "info2play.ee"
  }
}
  • Handle: @textfield--invalid
  • Tags:
  • Variants (3): default, invalid, inverse
  • Preview:
  • Filesystem Path: src/patterns/components/forms/textfield/textfield.twig

Inverse

<div class="form-textfield form-textfield--inverse ">
    <div class="form-textfield__inner">
        <input type="text" class="form-textfield__input" id="text1" name="" value="">
        <label class="form-textfield__label" for="text1">Textfield label</label>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "label": "Textfield label",
    "id": "text1"
  },
  "modifier": "form-textfield--inverse"
}
  • Handle: @textfield--inverse
  • Tags:
  • Variants (3): default, invalid, inverse
  • Preview:
  • Filesystem Path: src/patterns/components/forms/textfield/textfield.twig