File-upload examples
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
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"
},
"classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}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 p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:max-w-none" 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.
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."
},
"classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}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 p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:max-w-none" 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
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"
},
"classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}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 p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:max-w-none 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
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"
},
"classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}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 p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:max-w-none" id="file-upload-4" name="file-upload-4" type="file" accept=".jpg, .jpeg, .png">
</div>
<!-- /file-upload -->with label as page heading
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
},
"classes": "overflow-x-auto max-w-64 lg:max-w-none"
}) }}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 p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:max-w-none" id="file-upload-5" name="file-upload-5" type="file">
</div>
<!-- /file-upload -->with optional form-group classes
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"
},
"classes": "overflow-x-auto max-w-64 lg:max-w-none",
"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 p-xs file:mr-base focus:outline-none file:inline-flex file:items-baseline file:px-3 file:py-2 file:bg-white file:border file:border-solid file:border-primary-base file:rounded file:align-baseline file:font-semibold file:text-primary-base file:transition-all file:duration-100 file:ease-out file:whitespace-nowrap file:cursor-pointer file:focus:bg-warning-base file:focus:border-warning-base file:focus:shadow-outline-black file:focus:text-black file:focus:outline-none file:hover:bg-neutral-light file:hover:border-primary-base file:hover:text-primary-base overflow-x-auto max-w-64 lg:max-w-none" id="file-upload-6" name="file-upload-6" type="file">
</div>
<!-- /file-upload -->