<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</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 %>