Text field

Preview 
<div class="textfield ">
    <label class="textfield__label" for="testId1">Input labels</label>
    <div class="textfield__control ">
        <input class="textfield__input" id="testId1" placeholder="Write some value here!" type="text" value="" />
        <div class="textfield__notice">See on kohustuslik väli!</div>
    </div>
</div>
 
{
  "label": "Input labels",
  "id": "testId1",
  "placeholder": "Write some value here!",
  "helpText": "See on kohustuslik väli!",
  "type": "text"
}

Inline

Preview 
<div class="textfield textfield--inline">
    <label class="textfield__label" for="testId1">Input labels</label>
    <div class="textfield__control ">
        <input class="textfield__input" id="testId1" placeholder="Write some value here!" type="text" value="" />
        <div class="textfield__notice">See on kohustuslik väli!</div>
    </div>
</div>
 
{
  "label": "Input labels",
  "id": "testId1",
  "placeholder": "Write some value here!",
  "helpText": "See on kohustuslik väli!",
  "type": "text",
  "modifiers": "textfield--inline"
}

Error

Preview 
<div class="textfield is-error">
    <label class="textfield__label" for="testId1">Input labels</label>
    <div class="textfield__control ">
        <input class="textfield__input" id="testId1" placeholder="Write some value here!" type="text" value="" />
        <div class="textfield__notice">See on kohustuslik väli!</div>
    </div>
</div>
 
{
  "label": "Input labels",
  "id": "testId1",
  "placeholder": "Write some value here!",
  "helpText": "See on kohustuslik väli!",
  "type": "text",
  "modifiers": "is-error"
}

Tooltip

Preview 
<div class="row">
    <div class="col-sm-6">
        <div class="textfield ">
            <label class="textfield__label" for="testId1">Input labels</label>
            <div class="textfield__control  textfield__control--tooltip">
                <input class="textfield__input" id="testId1" placeholder="Write some value here!" type="text" value="" />
                <span data-tooltip="right" title="information">
                        
                        <i class="fas fa-info-circle tooltip__icon" ></i>
                        <div class="tooltip__content">
                            <p><b>Abiteksti pealkiri</b></p>
                            <p>Kui abiteksti sisu laius ületab tekstivälja laiuse, võiks kasutada selle asemel vihjemulli.</p>
                        </div>
                    </span>
            </div>
        </div>
    </div>
</div>
 
{
  "label": "Input labels",
  "id": "testId1",
  "placeholder": "Write some value here!",
  "helpText": null,
  "type": "text",
  "tooltip": true
}

Keskmine

Preview 
<div class="textfield textfield--medium">
    <label class="textfield__label" for="testId1">Input labels</label>
    <div class="textfield__control ">
        <input class="textfield__input" id="testId1" placeholder="Write some value here!" type="text" value="" />
        <div class="textfield__notice">See on kohustuslik väli!</div>
    </div>
</div>
 
{
  "label": "Input labels",
  "id": "testId1",
  "placeholder": "Write some value here!",
  "helpText": "See on kohustuslik väli!",
  "type": "text",
  "modifiers": "textfield--medium"
}

Väike

Preview 
<div class="textfield textfield--small">
    <label class="textfield__label" for="testId1">Input labels</label>
    <div class="textfield__control ">
        <input class="textfield__input" id="testId1" placeholder="Write some value here!" type="text" value="" />
        <div class="textfield__notice">See on kohustuslik väli!</div>
    </div>
</div>
 
{
  "label": "Input labels",
  "id": "testId1",
  "placeholder": "Write some value here!",
  "helpText": "See on kohustuslik väli!",
  "type": "text",
  "modifiers": "textfield--small"
}

Eriti väike

Preview 
<div class="textfield textfield--xsmall">
    <label class="textfield__label" for="testId1">Input labels</label>
    <div class="textfield__control ">
        <input class="textfield__input" id="testId1" placeholder="Write some value here!" type="text" value="" />
        <div class="textfield__notice">See on kohustuslik väli!</div>
    </div>
</div>
 
{
  "label": "Input labels",
  "id": "testId1",
  "placeholder": "Write some value here!",
  "helpText": "See on kohustuslik väli!",
  "type": "text",
  "modifiers": "textfield--xsmall"
}