Get UIKit - Append form with email address

Question

On UIKit, How do you create an email form with an inline text so the user can input text and the form has @example.com after it.

You can do this in bootstrap here: https://getbootstrap.com/docs/4.0/components/input-group/

But I am unable to recreate this on UiKit?

Answer 1

Just "borrow" the concept from bootstrap. Wrap the elements within grid, group them with the class name, and inside the group add element with the flexbox display, it will fit automatically. From what I've seen in sources - they give him 1% width - maybe there's a case for that, but anyway works with only display:flex.

Here's my proposition:

HTML

<form class="uk-grid-small" uk-grid>

    <div class="uk-width-1-2@s input-group">
        <input class="uk-input" type="text" placeholder="50">
      <div class="input-group-append">
        <div class="input-group-text">
          @email
        </div>
      </div>
    </div>
</form>

CSS

.input-group {
  display: flex;
}
.input-group-append {
  display:flex;
  align-items:center;
}
.input-group-text {
    display: flex;
    align-items: center;
    font-weight: 400;
    height:38px;
    color: #495057;
    padding: 0 10px 0;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
  border-left:none;
}

I've also made a codepen for the reference https://codepen.io/arysom/pen/QzGjyo