<div class="m-ip-textbox">
    <label class="m-ip-textbox__label" for="disabled">Full name</label>
    <input class="m-ip-textbox__input" type="text" id="disabled" name="full_name" placeholder="Disabled input"
        disabled>
</div>

<div class="m-ip-textbox">
    <label class="m-ip-textbox__label" for="readonly">Full name</label>
    <input class="m-ip-textbox__input" type="text" id="readonly" name="full_name" placeholder="readonly input"
        readonly>
</div>

<div class="m-ip-textbox">
    <label class="m-ip-textbox__label" for="first-name">First Name</label>
    <span class="m-ip-textbox__help-text">Help text to fill in this value.</span>
    <span class="m-ip-textbox__error">Error message.</span>
    <input type="text" id="first-name" class="m-ip-textbox__input [modifier class]" name="first_name" value="Magesh">
</div>

<div class="m-ip-textbox [modifier class]">
    <label class="m-ip-textbox__label" for="error">Full name</label>
    <p class="m-ip-textbox__error">How to correct this input.</p>
    <input class="m-ip-textbox__input" type="text" id="error" name="full_name" value="Magesh Ravi">
</div>