Regione Toscana Design System

Input file component: Has Error And Description 

<div class="rtds-input-field rtds-gap-1  has-error">
    <label for="inputFileId" class="rtds-input-field__label">
        Text label

    </label>

    <div class="rtds-input has-error">
        <input id="inputFileId" class="rtds-text-sm rtds-input-placeholder rtds-pr-12" type="file" aria-describedBy="inputFileIdError idInputDescription" aria-invalid="true">
        <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-absolute rtds-right-4 rtds-content-placeholder rtds-content-error" aria-hidden="true" focusable="false" role="img">
            <use href="../../icons.svg#outline--exclamation-circle" />
        </svg>

    </div>

    <span class="rtds-input-field__hint">

        <span class="rtds-input-field__error" id="inputFileIdError" aria-live="assertive">
            il campo *nome campo* non può essere vuoto
        </span>

        <span class="rtds-input-field__description" id="idInputDescription">
            descrizione
        </span>

    </span>

</div>
 
{% extends '@input-field' %}
 
{
  "label": "Text label",
  "inputId": "inputFileId",
  "inputType": "file",
  "inputAriaDescribedError": "idInputErrorDescription",
  "errorDescription": "il campo *nome campo* non può essere vuoto",
  "inputHasErrorControl": true,
  "inputAriaDescribedBy": "idInputDescription",
  "inputDescription": "descrizione",
  "inputAriaInvalid": true,
  "inputIconAlert": true,
  "inputHasError": true
}
  • Content: 
    /*
 * @file
 * Styles for the input file component.
 */

:where(.rtds-input) input[type="file"] {
    @apply rtds-w-full;
}

::file-selector-button {
    @apply rtds-btn rtds-btn--secondary rtds-transition-all rtds-cursor-pointer rtds-mr-4 rtds-border-0;
}

/*:where(.rtds-input) input[type="file"]::before {
}*/

:where(.rtds-input--sm) ::file-selector-button {
    @apply rtds-btn--s;
}

:where(.rtds-input--lg) ::file-selector-button {
    @apply rtds-btn--l;
}
  • URL: /components/raw/input-file/input-file.css
  • Filesystem Path: components/03-molecules/forms/input-file/input-file.css
  • Size: 464 Bytes

No notes defined.