File-upload examples

Show params

Params

params:
- name: name
  type: string
  required: true
  description: The name of the input, which is submitted with the form data.
- name: id
  type: string
  required: true
  description: The id of the input
- name: value
  type: string
  required: false
  description: Optional initial value of the input
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: classes
  type: string
  required: false
  description: Classes to add to the file upload component.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the file upload component.

default

Show code

Macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Sube un archivo"
  }
})  }}

Markup

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-1">Sube un archivo</label>
  
  <!-- /label -->
  <input class="mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus" id="file-upload-1" name="file-upload-1" type="file">
</div>
<!-- /file-upload -->

with hint text

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

Show code

Macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-2",
  "name": "file-upload-2",
  "label": {
    "text": "Sube una foto"
  },
  "hint": {
    "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  }
})  }}

Markup

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-2">Sube una foto</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-2-hint" class="block text-neutral-dark">
    Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.
  </p>
  <!-- /hint -->
  <input class="mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>
<!-- /file-upload -->

with error message

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

Error: Error: Error message goes here

Show code

Macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-3",
  "name": "file-upload-3",
  "label": {
    "text": "Sube un archivo"
  },
  "hint": {
    "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
  },
  "errorMessage": {
    "text": "Error: Error message goes here"
  }
})  }}

Markup

<!-- file-upload -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="file-upload-3">Sube un archivo</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="file-upload-3-hint" class="block text-neutral-dark">
    Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.
  </p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="file-upload-3-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </p>
  <!-- /error-message -->
  <input class="mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus c-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error" aria-errormessage="file-upload-3-error" aria-invalid="true">
</div>
<!-- /file-upload -->

with attributes

Show code

Macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-4",
  "name": "file-upload-4",
  "label": {
    "text": "Sube una foto"
  },
  "attributes": {
    "accept": ".jpg, .jpeg, .png"
  }
})  }}

Markup

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="file-upload-4">Sube una foto</label>
  
  <!-- /label -->
  <input class="mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus" id="file-upload-4" name="file-upload-4" type="file" accept=".jpg, .jpeg, .png">
</div>
<!-- /file-upload -->

with label as page heading

Show code

Macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-5",
  "name": "file-upload-5",
  "label": {
    "text": "Sube un archivo",
    "isPageHeading": true
  }
})  }}

Markup

<!-- file-upload -->
<div class="c-form-group">
  <!-- label -->
      <h1 class="block "><label class="block" for="file-upload-5">Sube un archivo</label>
    </h1>
  <!-- /label -->
  <input class="mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus" id="file-upload-5" name="file-upload-5" type="file">
</div>
<!-- /file-upload -->

with optional form-group classes

Show code

Macro

{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
{{ componentFileUpload({
  "id": "file-upload-6",
  "name": "file-upload-6",
  "label": {
    "text": "Sube un archivo"
  },
  "formGroup": {
    "classes": "p-base bg-warning-light"
  }
})  }}

Markup

<!-- file-upload -->
<div class="c-form-group p-base bg-warning-light">
  <!-- label -->
  <label class="block" for="file-upload-6">Sube un archivo</label>
  
  <!-- /label -->
  <input class="mt-sm focus:outline-none focus:bg-warning-base focus:shadow-outline-focus" id="file-upload-6" name="file-upload-6" type="file">
</div>
<!-- /file-upload -->