input

// src/components/elements/form-element/input/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/form-element/input
additionalProperties: false
properties:
  attributes:
    type: string
  disabled:
    type: boolean
  id:
    type: string
  invalid:
    type: boolean
  placeholder:
    type: string
  value:
    type: string
  type:
    type: string
    enum:
      - text
      - email
      - password
      - date
      - number
      - tel
      - url

// src/components/elements/form-element/input/mocks.yaml

$variants:
  - $name: Empty
    id: input-empty
  - $name: Placeholder
    id: input-placeholder
    placeholder: Placeholder
  - $name: Invalid
    invalid: true
    id: input-invalid
  - $name: Filled out
    value: Pariatur quis tempor consequat eu
    id: input-filled-out
  - $name: Disabled
    disabled: true
    id: input-disabled
  - $name: Invalid and filled-out
    value: Excepteur sit laboris labore esse ad
    invalid: true
    id: input-invalid-and-filled-out
  - $name: Invalid and disabled
    disabled: true
    invalid: true
    id: input-invalid-and-disabled
  - $name: Filled out and disabled
    value: Nisi veniam
    disabled: true
    id: input-filled-out-and-disabled
  - $name: Filled out and disabled and invalid
    value: Adipisicing eiusmod aute
    disabled: true
    invalid: true
    id: input-filled-out-and-disabled-and-invalid

// src/components/elements/form-element/input/input.twig

<input{{ attributes }}
	{% if id %}id="{{ id }}"{% endif %}
	{% if name %}name="{{ name }}"{% endif %}
	{% if value %}value="{{ value }}"{% endif %}
	class="Input {{ classes|join(" ") }}"
	type="{{ type|default("text") }}"
	{% if disabled %} disabled{% endif %}
	{% if required %} required{% endif %}
	{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}
	{% if invalid %} aria-invalid="true"{% endif %}
>