Link copied!

Emoji Input Examples

This component of the Design System is deprecated, which means it'll be replaced or removed soon. Until that, the Design System team will support existing implementations, but please avoid implementing this component in new projects.
<div class="e-row">
  <div class="e-col-4">
    <div class="e-field">
      <label class="e-field__label" for="input1">
        Emoji Input Label
      </label>
      <e-emoji>
        <input class="e-input" id="input1" type="text" placeholder="Type text here" value="👨‍👩‍👦‍👦">
      </e-emoji>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-4">
    <div class="e-field">
      <label class="e-field__label" for="input1">
        Emoji Input Label
      </label>
      <e-emoji error>
        <input class="e-input" id="input1" type="text" placeholder="Type text here" value="😿">
      </e-emoji>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-4">
    <div class="e-field">
      <label class="e-field__label" for="input2">
        Emoji Input Label
      </label>
      <e-emojipicker class="e-emojipicker">
        <e-emoji>
          <input class="e-input" id="input2" type="text" placeholder="Type text here" value="">
        </e-emoji>
      </e-emojipicker>
    </div>
  </div>
</div>
<div ng-init="test = '30&amp;#x1F601;&amp;#x1F601;'"></div>
Model value: 30&#x1F601;&#x1F601;
<div class="e-row">
  <div class="e-col-4">
    <div class="e-field">
      <label class="e-field__label" for="input3">
        Emoji Input Label
      </label>
      <e-emojipicker class="e-emojipicker">
        <e-emoji>
          <input class="e-input" type="text" id="input3" placeholder="Type text here" ng-model="test">
        </e-emoji>
      </e-emojipicker>
    </div>
  </div>
</div>