input--tel

// src/components/fsk/form/form-element/input/input--tel/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /fsk/form/form-element/input/input--tel
additionalProperties: false
properties:
  attributes:
    type: object
  children:
    type: string
    format: html
required:
  - attributes

// src/components/fsk/form/form-element/input/input--tel/mocks.yaml

attributes:
  $drupal: true
  id: input--tel-default
$variants:
  - $name: Invalid
    attributes:
      class:
        - error
      id: input--tel-invalid
  - $name: Filled out
    attributes:
      value: 123456789
      id: input--tel-filled-out
  - $name: Disabled
    attributes:
      disabled: true
      id: input--tel-disabled
  - $name: Invalid and filled-out
    attributes:
      value: Excepteur sit laboris labore esse ad
      class:
        - error
      id: input--tel-invalid-and-filled-out
  - $name: Invalid and disabled
    attributes:
      disabled: true
      class:
        - error
      id: input--tel-invalid-and-disabled
  - $name: Filled out and disabled
    attributes:
      value: 123456789
      disabled: true
      id: input--tel-filled-out-and-disabled
  - $name: Filled out and disabled and invalid
    attributes:
      value: Adipisicing eiusmod aute
      disabled: true
      class:
        - error
      id: input--tel-filled-out-and-disabled-and-invalid

// src/components/fsk/form/form-element/input/input--tel/input--tel.html.twig

<input{{ attributes ? attributes|without("id", "class", "type", "disabled", "required") : "" }}
  id="{{ attributes.id }}"
  class="FskInput {{ attributes.class }}"
  type="tel"
  {% if attributes.disabled %} disabled{% endif %}
  {% if attributes.required %} required{% endif %}
  {% if "error" in attributes.class %} aria-invalid="true"{% endif %}
>{{ children }}