Copy environment

Textfield

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

Value

Preview 
<div class="textfield is-dirty">
    <label class="textfield__label " for="text1">
        Textfield label
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="text1" name="" value="jaanus.juurikas@maailmaviljad.com" placeholder="">
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Textfield label",
    "id": "text1",
    "value": "jaanus.juurikas@maailmaviljad.com"
  }
}

Rounded

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

Footer

Preview 
<div class="textfield textfield--footer is-dirty">
    <label class="textfield__label " for="text1">
        Sinu nimi
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="text1" name="" value="Jaanus Juurikas" placeholder="">
    </div>
</div>

Invalid

Preview 
<div class="textfield is-dirty is-invalid">
    <label class="textfield__label " for="text1">
        Textfield label
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="text1" name="" value="info2play.ee" placeholder="">
    </div>
    <div class="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"
  }
}

Required

Preview 
<div class="textfield textfield--required">
    <label class="textfield__label " for="text1">
        Sinu e-post
    </label>
    <div class="textfield__inner">
        <input class="textfield__input" type="text" id="text1" name="" value="" placeholder="">
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Sinu e-post",
    "id": "text1"
  },
  "modifier": "textfield--required"
}