Select

Preview 
<div class="select ">
    <label class="select__label" for="">Lemmik värv</label>
    <div class="select__control">
        <select class="select__input" name="" id="">
            <option class="select___placeholder" selected value="0">Vali</option>
                <option value="value1">option1</option>
                <option value="value2">option2</option>
                <option value="value3">option3</option>
                <option value="value4">option4</option>
                <option value="value5">option5</option>
                <option value="value6">option6</option>
        </select>
        <div class="select__notice">Siit saad valida</div>
    </div>
</div>
 
{
  "label": "Lemmik värv",
  "namie": "nimi",
  "placeholder": "Vali",
  "helpText": "Siit saad valida",
  "options": {
    "option1": "value1",
    "option2": "value2",
    "option3": "value3",
    "option4": "value4",
    "option5": "value5",
    "option6": "value6"
  }
}

Inline

Preview 
<div class="select select--inline">
    <label class="select__label" for="">Lemmik värv</label>
    <div class="select__control">
        <select class="select__input" name="" id="">
            <option class="select___placeholder" selected value="0">Vali</option>
                <option value="value1">option1</option>
                <option value="value2">option2</option>
                <option value="value3">option3</option>
                <option value="value4">option4</option>
                <option value="value5">option5</option>
                <option value="value6">option6</option>
        </select>
        <div class="select__notice">Siit saad valida</div>
    </div>
</div>
 
{
  "label": "Lemmik värv",
  "namie": "nimi",
  "placeholder": "Vali",
  "helpText": "Siit saad valida",
  "options": {
    "option1": "value1",
    "option2": "value2",
    "option3": "value3",
    "option4": "value4",
    "option5": "value5",
    "option6": "value6"
  },
  "modifiers": "select--inline"
}

Valideerimine

Preview 
<div class="select is-error">
    <label class="select__label" for="">Lemmik värv</label>
    <div class="select__control">
        <select class="select__input" name="" id="">
            <option class="select___placeholder" selected value="0">Vali</option>
                <option value="value1">option1</option>
                <option value="value2">option2</option>
                <option value="value3">option3</option>
                <option value="value4">option4</option>
                <option value="value5">option5</option>
                <option value="value6">option6</option>
        </select>
        <div class="select__notice">Siit saad valida</div>
    </div>
</div>
 
{
  "label": "Lemmik värv",
  "namie": "nimi",
  "placeholder": "Vali",
  "helpText": "Siit saad valida",
  "options": {
    "option1": "value1",
    "option2": "value2",
    "option3": "value3",
    "option4": "value4",
    "option5": "value5",
    "option6": "value6"
  },
  "modifiers": "is-error"
}

Keskmine

Preview 
<div class="select select--medium">
    <label class="select__label" for="">Lemmik värv</label>
    <div class="select__control">
        <select class="select__input" name="" id="">
            <option class="select___placeholder" selected value="0">Vali</option>
                <option value="value1">option1</option>
                <option value="value2">option2</option>
                <option value="value3">option3</option>
                <option value="value4">option4</option>
                <option value="value5">option5</option>
                <option value="value6">option6</option>
        </select>
        <div class="select__notice">Siit saad valida</div>
    </div>
</div>
 
{
  "label": "Lemmik värv",
  "namie": "nimi",
  "placeholder": "Vali",
  "helpText": "Siit saad valida",
  "options": {
    "option1": "value1",
    "option2": "value2",
    "option3": "value3",
    "option4": "value4",
    "option5": "value5",
    "option6": "value6"
  },
  "modifiers": "select--medium"
}

Väike

Preview 
<div class="select select--small">
    <label class="select__label" for="">Lemmik värv</label>
    <div class="select__control">
        <select class="select__input" name="" id="">
            <option class="select___placeholder" selected value="0">Vali</option>
                <option value="value1">option1</option>
                <option value="value2">option2</option>
                <option value="value3">option3</option>
                <option value="value4">option4</option>
                <option value="value5">option5</option>
                <option value="value6">option6</option>
        </select>
        <div class="select__notice">Siit saad valida</div>
    </div>
</div>
 
{
  "label": "Lemmik värv",
  "namie": "nimi",
  "placeholder": "Vali",
  "helpText": "Siit saad valida",
  "options": {
    "option1": "value1",
    "option2": "value2",
    "option3": "value3",
    "option4": "value4",
    "option5": "value5",
    "option6": "value6"
  },
  "modifiers": "select--small"
}

Eriti väike

Preview 
<div class="select select--xsmall">
    <label class="select__label" for="">Lemmik värv</label>
    <div class="select__control">
        <select class="select__input" name="" id="">
            <option class="select___placeholder" selected value="0">Vali</option>
                <option value="value1">option1</option>
                <option value="value2">option2</option>
                <option value="value3">option3</option>
                <option value="value4">option4</option>
                <option value="value5">option5</option>
                <option value="value6">option6</option>
        </select>
        <div class="select__notice">Siit saad valida</div>
    </div>
</div>
 
{
  "label": "Lemmik värv",
  "namie": "nimi",
  "placeholder": "Vali",
  "helpText": "Siit saad valida",
  "options": {
    "option1": "value1",
    "option2": "value2",
    "option3": "value3",
    "option4": "value4",
    "option5": "value5",
    "option6": "value6"
  },
  "modifiers": "select--xsmall"
}