Regione Toscana Design System

Input file component: Is Required 

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

        <abbr class="rtds-font-bold rtds-no-underline" title="obbligatorio">*</abbr>

    </label>

    <div class="rtds-input">
        <input id="inputFileId" class="rtds-text-sm rtds-input-placeholder" type="file" aria-required="true" aria-describedBy="inputFileIdError">
    </div>

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

        <span class="rtds-input-field__error" id="inputFileIdError" aria-live="assertive">

        </span>

    </span>

</div>
 
{% extends '@input-field' %}
 
{
  "label": "Text label",
  "inputId": "inputFileId",
  "inputType": "file",
  "inputRequired": 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.