Input Readonly Showcase

<h2>Text Input Types</h2>
<div>
    <input class="hoo-input-text" id="file-upload-28"  type="text"  
        placeholder="A placeholder text"  >
</div>
<div>
    <input class="hoo-input-text" id="file-upload-28"  type="email"  placeholder="John.Doe@example.com"    >
</div>
<div>
    <input class="hoo-input-text" type="password" id="file-upload-28"   placeholder="https://example.com"  >
</div>
<div>
    <input class="hoo-input-text" type="phone" id="file-upload-28"   placeholder="555-8039"  >
</div>
<div>
    <input class="hoo-input-text" type="url" id="file-upload-28"   placeholder="https://example.com"  >
</div>
<div>
    <label for="zipca">Canadian Zip Code</label>
    <input placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" data-charset="_X_ X_X" id="zipca" type="text"
        name="zipcodeca" title="6-character alphanumeric zip code in the format of A1A 1A1"><br>
    <label for="phone1">Phone Number</label>
    <input id="phone1" type="tel" placeholder="+1 (555) 555-5555" class="masked"
        pattern="(\+\d{1,3})?[-.\s]?(\d{1,3})?[-.\s]?(\(?\d{3}\)?)[-.\s]?\d{3}[-.\s]?\d{4}"
        data-valid-example="+1 (555) 555-5555"
        title="Phone number in formats like +1 (555) 555-5555, +1-555-555-5555, or +15555555555"><br>
    <label for="tel">Telephone</label>
    <input aria-describedby="mask-hidden-helper-msg helper1" id="tel" type="text" inputmode="numeric" data-charset="+__-___-___-____" name="phone" placeholder="+_--___-____" 
           pattern="(\+\d{1,3}[-.\s]?)?(\(?\d{1,3}\)?[-.\s]?)?\d{3}[-.\s]?\d{4}" 
           class="masked" title="Phone number in formats like +1-234-567-8901 or 234-567-8901">
</div>
<div>
    <div class="hoo-input-group">
        <div id="suffix-label-file-upload-28" class="hoo-input-prefix">https://</div>
        <input class="hoo-input-text"  id="file-upload-28" 
            placeholder="A placeholder text"  >
    </div>
</div>
<div>
    <div class="hoo-input-group">
        <input class="hoo-input-text"  id="file-upload-28" 
            placeholder="A placeholder text" data-suffix=".com"  aria-labelledby="suffix-label-file-upload-28" >
        <div id="suffix-label-file-upload-28" class="hoo-input-suffix">.com</div>
    </div>
</div>
<div>
    <p>Invalid style can be assigned using a CSS class:</p>
    <input class="hoo-input-text " type="text" placeholder="This is just a placehoder">
    <p>Or just with default pseudo selector `:invalid`</p>
    <input class="hoo-input-text" type="text" placeholder="This is just a placehoder" value="" required>
    <p>The empty field is required there for at its current state invalid<br>To avoid showing up as invalid add the '.is-empty' class to the styles</p>
    <input class="hoo-input-text is-empty" type="text" placeholder="This is just a placehoder" value="" required>
    <p>Invalid fields can be also defined by using patter</p>
    <input class="hoo-input-text" type="text" placeholder="This is just a placehoder" value="ABC" pattern="[a-z]{4,8}">
    <p>The previous input only allows lowercase characters and a length of 4-8 characters</p>
</div>
<div>
    <div class="hoo-input-group">
        <div class="hoo-input-prefix">https://</div>
        <input class="hoo-input-text" id="file-upload-28"  type="text" placeholder="A placeholder text" data-suffix=".com" data-prefix="https://"   >
        <div class="hoo-input-suffix">.com</div>
    </div>
</div>
<div>
    <div class="hoo-input-search">
        <svg class="hoo-icon icon-search">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-search">
            </use>
        </svg>
        <input class="hoo-input-text" type="search" placeholder="Search" >
    </div>
</div>
<h2>Number Input Types</h2>
<div>
    <input class="hoo-input-text" type="number" min="0" max="100"    >
</div>
<h2>Date and Time Input Types</h2>
<div>
    <input type="date" class="hoo-input-date" id="file-upload-28"  name="my-date-picker-name" value="2021-10-26" min="2018-01-01" max="2030-12-31"    >
</div>
<div>
    <input type="month" class="hoo-input-date" id="file-upload-28"  name="my-date-picker-name" value="2021-10-26" min="2018-01-01" max="2030-12-31"    >
</div>
<div>
    <input type="week" class="hoo-input-date" id="file-upload-28"  name="my-date-picker-name" value="2021-10-26" min="2018-01-01" max="2030-12-31"    >
</div>
<div>
    <input type="datetime-local" class="hoo-input-date" name="my-date-picker-name" value="2021-10-26" min="2018-01-01" max="2030-12-31"    >
</div>
<div>
    <input type="time" class="hoo-input-time" id="file-upload-28"  name="" value="" min="" max=""  >
</div>
<h2>Special Input Types</h2>
<div>
    <input class="hoo-input-color" type="color" value="#000" hsla >
</div>
<div>
    <section class="hoo-input-file">
        <label class="hoo-infile-label" name="file-upload" tabIndex="-1" for="file-upload-3" draggable="true">
            <div class="hoo-infile-icon"><span class="hoo-icon">
                <svg class="hoo-icon-svg icon-arrow-upload-filled" aria-hidden="true">
                    <title>Upload</title>
                    <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-upload-filled">
                    </use>
                </svg></span>
        </div>
        <div>Click or drag and drop files here to upload filed
            <p class="hoo-infile-description">Max file size: 10MB, Types: jpg, png, pdf</p>
        </div>
    </label>
    <input type="file" id="file-upload-3" name="" class="hoo-infile-context" multiple aria-describedby="file-upload-3-content" />
    <output class="hoo-infile-output" id="NaN-content" aria-live="polite" title="Current selection">
    </output>
</section>
</div>
<h2>Form Controls</h2>
<div>
    <textarea class="hoo-input-text" id="file-upload-3"   >
    </textarea>
</div>
<div>
    <input type="checkbox" name="checkbox-1234" id="checkbox-1234" value="" class="hoo-checkbox" >
    <label for="checkbox-1234">Checkbox Label</label>
</div>
<div>
    <input type="radio" name="" id="checkbox-1234" value="" class="hoo-radio">
    <label for="checkbox-1234" >Radio Button Label</label>
</div>
<div>
    <input type="radio" name="checkbox-1234" id="checkbox-1234" value="" class="hoo-radio" disabled=""  aria-disabled="" >
    <label for="checkbox-1234" >Radio Button Label</label>
</div>
<div>
    <div class="hoo-toggle">
        <input type="checkbox" class="hoo-toggle-cb" name="toggleName" id="toggle-97" >
        <label for="toggle-97" class="hoo-toggle-label"><span class="hoo-toggle-slider"></span><span class="hoo-toggle-checked">On</span><span class="hoo-toggle-unchecked">Off</span>
</label>
</div>
</div>