Code Usage

Maxlength creates a new Form Property: #maxlength_js which, in conjunction with #maxlength, will enforce (via JavaScript) the maxlength of a textfield, a textarea, or a text_format and will show the number of characters left.

Whether when creating a form or when altering one, put both #maxlength and #maxlength_js properties on the elements you want to control.

#maxlength

Description: The maximum amount of characters to accept as input.

Values: A positive number.

#maxlength_js

Used by: textfield, textarea, text_format

Description: Indicates whether or not the field should have a reverse character counter.

Values: TRUE or FALSE

Form API Example

  $form['description'] = array(
    '#required' => '1',
    '#description' => t('Max. 500 Characters'),
    '#type' => 'textarea',
    '#maxlength' => 500,
    '#maxlength_js' => TRUE,
    '#attributes' =>array(
      'maxlength_js_label' => '@remaining characters left.',
    ),
    '#title' => t('Detailed Description (required)'),
  );

Extras:

For the text of a link field:

/**
 * Implements hook_field_widget_form_alter().
 */
function MODULE_NAME_field_widget_form_alter(&$element, Drupal\Core\Form\FormStateInterface $form_state, $context) {
  $items = $context['items'];
  $field = $items->getName();

  if ($field == "field_NAME") {
    if (key_exists('form_id', $form_state->getBuildInfo())) {
      $build_info = $form_state->getBuildInfo();
      if ($build_info['form_id'] == 'FORM_ID' || $build_info['form_id'] == 'FORM_ID_EDIT') {
        $element['title']['#maxlength_js'] = TRUE;
        $element['title']['value']['#maxlength_js'] = TRUE;

        $maxlength_js = 500;
        $element['title']['value']['#attributes']['maxlength'] = $maxlength_js;
        $element['title']['#attributes']['maxlength'] = $maxlength_js;

        $maxlength_js_label = 'Contenido limitado a @limit caracteres, quedan: <strong>@remaining</strong>';
        $element['title']['#attributes']['maxlength_js_label'][] = $maxlength_js_label;
        $element['title']['value']['#attributes']['maxlength_js_label'][] = $maxlength_js_label;
      }
    }
  }
}