input--number

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

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

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

attributes:
  $drupal: true
  id: input--number-default
$variants:
  - $name: Invalid
    attributes:
      class:
        - error
      id: input--number-invalid
  - $name: Filled out
    attributes:
      value: 10
      id: input--number-filled-out
  - $name: Disabled
    attributes:
      disabled: true
      id: input--number-disabled
  - $name: Invalid and filled-out
    attributes:
      value: 10
      class:
        - error
      id: input--number-invalid-and-filled-out
  - $name: Invalid and disabled
    attributes:
      disabled: true
      class:
        - error
      id: input--number-invalid-and-disabled
  - $name: Filled out and disabled
    attributes:
      value: 10
      disabled: true
      id: input--number-filled-out-and-disabled
  - $name: Filled out and disabled and invalid
    attributes:
      value: 10
      disabled: true
      class:
        - error
      id: input--number-filled-out-and-disabled-and-invalid

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

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