Copy environment

Textarea

Preview 
<div class="textfield textarea">
    <label class="textfield__label " for="text1">
        Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input     " type="text" id="text1" name=""></textarea>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)",
    "id": "text1"
  }
}

Invalid

Preview 
<div class="textfield textarea is-dirty is-invalid">
    <label class="textfield__label " for="text1">
        Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input     " type="text" id="text1" name="">Olime 1. oktoobril kontoris ja tegime uue textarea componendi</textarea>

    </div>
    <div class="textfield__error">
        Please check your input
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)",
    "id": "text1",
    "isInvalid": true,
    "error": "Please check your input",
    "value": "Olime 1. oktoobril kontoris ja tegime uue textarea componendi"
  }
}

Disabled

Preview 
<div class="textfield textarea is-dirty is-disabled">
    <label class="textfield__label " for="text1">
        Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input     " type="text" id="text1" name="" disabled>Tere</textarea>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)",
    "id": "text1",
    "isDisabled": true,
    "value": "Tere"
  }
}

Required

Preview 
<div class="textfield textfield--required textarea">
    <label class="textfield__label " for="text1">
        Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input     " type="text" id="text1" name="" required></textarea>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)",
    "id": "text1",
    "required": true
  },
  "modifier": "textfield--required"
}

Footer

Preview 
<div class="textfield textarea--footer textarea">
    <label class="textfield__label " for="text1">
        Sinu teade:
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input     " type="text" id="text1" name=""></textarea>

    </div>
</div>

Resizable

Preview 
<div class="textfield textarea--resize textarea">
    <label class="textfield__label " for="text1">
        Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)
    </label>
    <div class="textfield__inner">
        <textarea class="textfield__input textarea__input     " type="text" id="text1" name=""></textarea>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "label": "Ohtliku olukorra kirjeldus(kirjeldage mis, kus, millal, kes ja miks)",
    "id": "text1"
  },
  "modifier": "textarea--resize"
}