How to add asterisk symbol in required Field

Question

I have to add asterisk symbol(*) on required field how can I do this in polymer . <paper-input id="firstNameText" required label="First Name" ></paper-input>

Answer 1

Check paper-input

You have there some information about it

--paper-input-container-label-after: Mixin applied to label after pseudo element (useful for required asterisk) {}

Note that you would have to use paper-input-container also

Might this work?:

element {
   --paper-input-container-label-after: {
       your properties for adding *
   };
}

Answer 2

Add this to the paper-input tag: placeholder="*" With CSS you can style the placeholder.

Answer 3

The paper-input has both a prefix and a suffix slot, so you can add a span or even another Polymer element into the slot.

<paper-input id="firstNameText" label="First Name">
  <span class="colourRed" slot="prefix">*</span>
</paper-input>

<paper-input id="surnameText" label="Surname">
  <required-element slot="suffix"></required-element>
</paper-input>

If you want to use the required attribute, you would do something along the lines of the following:

<paper-input auto-validate
             char-counter
             class="fillWidth100Percent"
             error-message="Please enter a name."
             invalid="{{invalid.FirstName}}"
             label="First Name"
             maxlength="255"
             required
             value="{{firstName}}">
    <required-element slot="suffix">
    </required-element>
</paper-input>

Note that the required-element would be a custom element.