input--textfield

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

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

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

attributes:
  $drupal: true
  id: input--textfield-default
$variants:
  - $name: Invalid
    attributes:
      class:
        - error
      id: input--textfield-invalid
  - $name: Filled out
    attributes:
      value: Pariatur quis tempor consequat eu
      id: input--textfield-filled-out
  - $name: Disabled
    attributes:
      disabled: true
      id: input--textfield-disabled
  - $name: Invalid and filled-out
    attributes:
      value: Excepteur sit laboris labore esse ad
      class:
        - error
      id: input--textfield-invalid-and-filled-out
  - $name: Invalid and disabled
    attributes:
      disabled: true
      class:
        - error
      id: input--textfield-invalid-and-disabled
  - $name: Filled out and disabled
    attributes:
      value: Nisi veniam
      disabled: true
      id: input--textfield-filled-out-and-disabled
  - $name: Filled out and disabled and invalid
    attributes:
      value: Adipisicing eiusmod aute
      disabled: true
      class:
        - error
      id: input--textfield-filled-out-and-disabled-and-invalid

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

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