The Field container

Style the container you mount a Smart Field to, as if it were an <input> on your page. For example, to control padding and border on a Field, set these properties on the container. This is usually done by re-using the classes that you have applied to your DOM <input> elements. Example:

<style>
  .my-input {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

<form>
  <div>
    <label>Name</label>
    <input class="my-input">
  </div>
  <div>
    <label>Card</label>
    <!-- Using the same "my-input" class on the -->
    <!-- regular input above and on this container. -->
    <div class="my-input" id="card-field"></div>
  </div>
</form>

After the Field is mounted, the .DlocalField class is added to the container. Additionally, the following classes are automatically added to the container when the Field is complete, empty, focused, invalid, or autofilled by the browser:

• .DlocalField--complete
• .DlocalField--empty
• .DlocalField--focus
• .DlocalField--invalid
• .DlocalField--autofilled (Chrome and Safari only)

These class names can be customized using the classes option when you create a Smart Field.