<div class="form">
    <div class="form-header">
      <goat-text type="heading" heading-size="3" expressive="true">Form title</goat-text>
      <goat-text type="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
        it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
        including versions of Lorem Ipsum.
      </goat-text>
    </div>

    <div class="form-body">
      <goat-input type="text" class="form-field" label="Full Name" required invalid="true" invalid-text="Write your first and last name"></goat-input>

      <goat-textarea class="form-field" label="Description" required warn="true" warn-text="Not a valid input" value="Some random invalid text"></goat-textarea>

      <goat-number class="form-field" label="Age" success="Thanks for filling age"></goat-number>

      <goat-form-control class="form-field" label="Do you like ice cream?" required warn="true" warn-text="Dude check this fast!">
        <goat-checkbox>Yes</goat-checkbox>
      </goat-form-control>

      <goat-select id="select" class="form-field" placeholder="Select" clearable="true" label="Select a fruit" required invalid="true" invalid-text="Select something here for god sake!"></goat-select>

      <goat-form-control label="Write some script" required warn="true" warn-text="You can code here!">
        <goat-code-editor style="height: 20rem" value="function add(a,b){ return a+b;}"></goat-code-editor>
      </goat-form-control>
    </div>


    <goat-button>Submit</goat-button>
  </div>

  <style>
    .form-header {
      margin-bottom: var(--spacing-08);
    }

    .form-body {
      margin-bottom: var(--spacing-08);
    }
  </style>