2

I have an input field where people can write one or multiple email addresses. For now, when they are added I display a list of lightning:button with the selected ones but is does not look good at all.

I would like those added addresses to stack INSIDE the lightning:input as buttons or badges so the user can write at the right of them inside the input.

Something like this (not working):

  <lightning:input
    aura:id="email"
    type="email"
    label="a"
    name="a"
    multiple="{! true }"
  >
    <aura:iteration items="{! v.selectedEmails }" var="selectedEmail">
      <lightning:badge label="selectedEmail" />
    </aura:iteration>
  </lightning:input>

In fact I want it to work as it is for the tags insertion on Stackexchange.

1

I don' t know if you can display the email addresses as a badge as you are typing along in the lightning:input.

But I'd suggest, displaying the list of addresses entered after you've typed it all in the input box.

Below is an example using lightning:layout and lightning:layoutItem.

Demo with static badges:

<div>
    Email addresses entered : 
    <lightning:layout>
        <lightning:layoutItem padding="around-small">
            <lightning:badge label="Email1" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:badge label="Email2" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:badge label="Email3" />
        </lightning:layoutItem>
    </lightning:layout>
</div>
enter code here

This is how it looks like:

This is how it looks like

Your code would be something like:

<div>
    Email addresses entered : 
    <lightning:layout>
        <aura:iteration items="{! v.selectedEmails }" var="selectedEmail">
            <lightning:badge label="{!selectedEmail}" />
         </aura:iteration>
    </lightning:layout>
</div>
| improve this answer | |
  • You answer looks good but it is not what I expected: if they are too much items, the layout is broken at the right of the screen + I need to add an onclickevent on it. ty anw – Simon Placentino Jan 11 '17 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.