Forms

<div class="ui-form-group">
  <label class="ui-form-label">Label</label>
  <input type="text" class="ui-input" placeholder="Enter text...">
  <span class="ui-form-hint">Optional hint text</span>
</div>

<input type="text" class="ui-input ui-input--sm" placeholder="Small input">
<input type="text" class="ui-input" placeholder="Default input">
<input type="text" class="ui-input ui-input--lg" placeholder="Large input">

<input type="text" class="ui-input" placeholder="Normal">
<input type="text" class="ui-input ui-input--success" placeholder="Success">
<input type="text" class="ui-input ui-input--error" placeholder="Error">
<input type="text" class="ui-input" placeholder="Disabled" disabled>
<input type="text" class="ui-input" placeholder="Readonly" readonly value="Read only value">

<div class="ui-form-group">
  <label class="ui-form-label ui-form-label--required">Required Field</label>
  <input type="text" class="ui-input ui-input--error" placeholder="This field has an error">
  <span class="ui-form-error">This field is required</span>
</div>

<select class="ui-select ui-select--sm">
  <option>Small select</option>
  <option>Option 2</option>
</select>

<select class="ui-select">
  <option>Default select</option>
  <option>Option 2</option>
</select>

<select class="ui-select ui-select--lg">
  <option>Large select</option>
  <option>Option 2</option>
</select>

<textarea class="ui-textarea" placeholder="Enter your message..." rows="4"></textarea>

<label class="ui-checkbox">
  <input type="checkbox" class="ui-checkbox__input">
  <span class="ui-checkbox__label">Default checkbox</span>
</label>

<label class="ui-checkbox">
  <input type="checkbox" class="ui-checkbox__input" checked>
  <span class="ui-checkbox__label">Checked checkbox</span>
</label>

<label class="ui-checkbox">
  <input type="checkbox" class="ui-checkbox__input" disabled>
  <span class="ui-checkbox__label">Disabled checkbox</span>
</label>

<label class="ui-radio">
  <input type="radio" name="group" class="ui-radio__input" checked>
  <span class="ui-radio__label">Option A</span>
</label>

<label class="ui-radio">
  <input type="radio" name="group" class="ui-radio__input">
  <span class="ui-radio__label">Option B</span>
</label>

<label class="ui-radio">
  <input type="radio" name="group" class="ui-radio__input" disabled>
  <span class="ui-radio__label">Disabled option</span>
</label>

<label class="ui-switch">
  <input type="checkbox" class="ui-switch__input">
  <span class="ui-switch__label">Off</span>
</label>

<label class="ui-switch">
  <input type="checkbox" class="ui-switch__input" checked>
  <span class="ui-switch__label">On</span>
</label>

<label class="ui-switch">
  <input type="checkbox" class="ui-switch__input" disabled>
  <span class="ui-switch__label">Disabled</span>
</label>

<div class="ui-input-group">
  <span class="ui-input-group__text">@</span>
  <input type="text" class="ui-input" placeholder="Username">
</div>

<div class="ui-input-group">
  <input type="text" class="ui-input" placeholder="Search...">
  <button class="ui-btn ui-btn--primary">Search</button>
</div>

<div class="ui-input-group">
  <span class="ui-input-group__text">$</span>
  <input type="text" class="ui-input" placeholder="0.00">
  <span class="ui-input-group__text">.00</span>
</div>

<form>
  <div class="ui-row">
    <div class="ui-col-12 ui-col-md-6">
      <div class="ui-form-group">
        <label class="ui-form-label ui-form-label--required">First Name</label>
        <input type="text" class="ui-input" placeholder="John">
      </div>
    </div>
    <div class="ui-col-12 ui-col-md-6">
      <div class="ui-form-group">
        <label class="ui-form-label ui-form-label--required">Last Name</label>
        <input type="text" class="ui-input" placeholder="Doe">
      </div>
    </div>
  </div>
  <div class="ui-form-group">
    <label class="ui-form-label">Email</label>
    <input type="email" class="ui-input" placeholder="john@example.com">
  </div>
  <div class="ui-form-group">
    <label class="ui-form-label">Country</label>
    <select class="ui-select">
      <option>Select a country</option>
      <option>United States</option>
    </select>
  </div>
  <div class="ui-form-group">
    <label class="ui-form-label">Message</label>
    <textarea class="ui-textarea" rows="3" placeholder="Your message..."></textarea>
  </div>
  <div class="ui-form-group">
    <label class="ui-checkbox">
      <input type="checkbox" class="ui-checkbox__input">
      <span class="ui-checkbox__label">I agree to the terms and conditions</span>
    </label>
  </div>
  <button type="submit" class="ui-btn ui-btn--primary">Submit</button>
</form>