<form class="needs-validation" novalidate>
  <div class="alert alert-danger d-none">Please review the problems below:</div>

  <div class="form-group">
    <label for="exampleInputName">Name</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" id="exampleInputName" placeholder="Your name" required>
    </div>
    <div class="invalid-feedback">Name can't be blank</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Text input example</small>
  </div>

  <div class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">example-</span>
      </div>
      <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
      <div class="input-group-append">
        <span class="input-group-text" id="basic-addon1">@gmail.com</span>
      </div>
    </div>
    <div class="invalid-feedback">Email can't be blank</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword">Password</label>
    <div class="input-group">
      <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
      <div class="input-group-append">
        <span class="input-group-text" id="basic-addon1">🙊</span>
      </div>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Password input example</small>
  </div>

  <div class="form-group">
    <label for="exampleTextareaBio">Bio</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">With textarea</span>
      </div>
      <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
    </div>
    <div class="invalid-feedback">Please provide a valid value.</div>
    <div class="valid-feedback">Looks good!</div>
    <small class="form-text text-muted">Textarea input example</small>
  </div>

  <button type="submit" class="btn btn-primary">Create User!</button>
  <button type="reset" class="btn btn-outline-secondary">Cancel</button>
</form>

<%= simple_form_for @user, url: examples_input_group_path,
  wrapper: :input_group do |f| %>

  <%= f.error_notification %>

  <%= render partial: "shared/form_unused_as_hidden", locals: {
    f: f, fields: [:avatar, :birthday, :color, :fruit, :music, :language, :pill, :choises, :active, :friends, :mood, :awake, :first_kiss]
  } %>

  <%= f.input :name, prepend: "@" %>

  <%= f.input :email, prepend: "example-", append: "@gmail.com" %>

  <%= f.input :password, append: "🙊" %>

  <%= f.input :bio, prepend: "With textarea" %>

  <%= f.button :submit, class: "btn-primary" %>
  <%= f.button :button, "Cancel", type: "reset", class: "btn-outline-secondary" %>
<% end %>