<h3>TODO</h3>
<ol>
    <li>select/dropdown</li>
    <li>checkboxes</li>
    <li>radio button</li>
    <li>...</li>
</ol>

<h2>Basic elements</h2>

<h3>Text Field Components</h3>
<!-- Default, used for any default text style like name, address ... -->
<form action="" class="form">
    <input type="text" class="bx-input">
</form>

<form action="" class="form">
    <input type="email" class="bx-input--email">
</form>

<form action="" class="form">
    <input type="number" class="bx-input--currency">
</form>

<form action="" class="form">
    <input type="password" class="bx-input--password">
</form>

<form action="" class="form">
    <input type="number" class="bx-input--ccnumber">
</form>


<h3>Textareas Components</h3>

<form action="" class="form">
    <textarea class="bx-textarea" name=""></textarea>
</form>

<form action="" class="form">
    <!-- label for name should match corresponding input name whether using BEM naming convention or not -->

    <label for="form__input--first-name">First Name</label>
    <input type="text" name="form__input--first-name" class="form__input--first-name">

    <label for="form__input--last-name">Last Name</label>
    <input type="text" name="form__input--last-name" class="form__input--last-name">

    <label for="form__input--phone-number"></label>
    <input type="tel" class="form__input--phone-number">

    <label for="form__input--company-name"></label>
    <input type="text" class="form__input--company-name">

    <label for="form__input--country"></label>

    <label for="form__input--email"></label>
    <input type="email" class="form__input--email">

    <label for="form__input--password"></label>
    <input type="password" class="form__input--password">

    <label for="form__input--password-confirm"></label>
    <input type="password" class="form__input--password-confirm">

    <label for="form__input-security-question"></label>
    <input type="text" class="form__input-security-question">

    <label for="form__input-security-answer"></label>
    <input type="text" class="form__input-security-answer">

    <!-- Reset Secondary Button -->
    <button class="btn--secondary" type="reset">reset</button>

    <!-- Submit Primary Button-->
    <button class="btn--primary" type="submit">submit button</button>

</form>

<form action="" class="form">
  <label for="email"></label>
  <input type="email" class="form__email">

  <label for="password"></label>
  <input type="password" class="form__password">

  <!-- Submit Primary Button-->
  <button class="btn--primary" type="submit">submit button</button>
</form>

Remove extra input variations; remove BEM from type attrs
Remove extra input variations; remove BEM from type attrs
