input

The styling for the file upload button is done via elements/button.

Information

Folder
src/components/elements/file-upload/input

Files

Schema
// src/components/elements/file-upload/input/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/file-upload/input
additionalProperties: false
properties:
  attributes:
    type: string
  disabled:
    type: boolean
  id:
    type: string
  invalid:
    type: boolean
  value:
    type: string
Mocks
// src/components/elements/file-upload/input/mocks.yaml

$variants:
  - $name: Empty
    id: input-empty
  - $name: Invalid
    invalid: true
    id: input-invalid
  - $name: Disabled
    disabled: true
    id: input-disabled
  - $name: Invalid and disabled
    disabled: true
    invalid: true
    id: input-invalid-and-disabled
Template
// src/components/elements/file-upload/input/input.twig

<input{{ attributes }}
	{% if id %}id="{{ id }}"{% endif %}
	{% if name %}name="{{ name }}"{% endif %}
	class="FileUploadInput {{ classes|join(" ") }}"
	type="file"
	{% if disabled %} disabled{% endif %}
	{% if required %} required{% endif %}
	{% if invalid %} aria-invalid="true"{% endif %}
>

Variants

Empty
Open
Invalid
Open
Disabled
Open
Invalid and disabled
Open