Input Field Reg

Open in Figma View all renders

Input reg

<div class="input-field">
    <label for="input">label</label>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input" class="input" name="input" placeholder="Your reg" type="text">
    </div>
</div>

Variations and modifiers

Input reg with multiple sizes

This component renders input fields with different sizes (medium, large, and xlarge), demonstrating the various size options available. 

<div style="width: 100%; max-width: 360px;">
    <div class="input-field related-spacing">
        <label for="input-medium">medium size</label>
        <div class="input-field__group">
            <div class="input-field__group-addon">
                <div class="icon">
                    <img src="/images/UK-flag.svg" alt="UK flag" />
                    <img src="/images/UK.svg" alt="UK" />
                </div>
            </div>
            <input id="input-medium" class="input" name="input" placeholder="Your reg" type="text">
        </div>
    </div>

    <div class="input-field input-field--large related-spacing">
        <label for="input-large">large size</label>
        <div class="input-field__group">
            <div class="input-field__group-addon">
                <div class="icon">
                    <img src="/images/UK-flag.svg" alt="UK flag" />
                    <img src="/images/UK.svg" alt="UK" />
                </div>
            </div>
            <input id="input-large" class="input" name="input" placeholder="Your reg" type="text">
        </div>
    </div>

    <div class="input-field input-field--xlarge">
        <label for="input-xlarge">xlarge size</label>
        <div class="input-field__group">
            <div class="input-field__group-addon">
                <div class="icon">
                    <img src="/images/UK-flag.svg" alt="UK flag" />
                    <img src="/images/UK.svg" alt="UK" />
                </div>
            </div>
            <input id="input-xlarge" class="input" name="input" placeholder="Your reg" type="text">
        </div>
    </div>
</div>

Input reg with success state

This component renders an input field with a success state, including a success icon and appropriate styling. 

<div class="input-field">
    <label for="input-success">label</label>
    <div class="input-field__group input-field__group--success">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-success" class="input success" name="input" placeholder="Your reg" type="text">
    </div>
</div>

Input reg with error state

This component renders an input field with an error state, including an error icon and appropriate styling. 

<div class="input-field">
    <label for="input-error">label</label>
    <div class="input-field__group input-field__group--error">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-error" class="input error" name="input" placeholder="Your reg" type="text">
    </div>
    <div class="input-field__validation">validation message</div>
</div>

Input reg with hint text

This component renders an input field with a hint text section, providing additional context or instructions to the user. 

<div class="input-field">
    <label for="input-hint">label</label>
    <div id="input-hint-text" class="input-field__hint">hint text</div>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-hint" class="input" name="input" placeholder="Your reg" type="text">
    </div>
</div>

Input reg with help text

This component renders an input field with a help text section, providing additional context or instructions to the user. 

<div class="input-field">
    <label for="input-help">label</label>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-help" class="input" name="input" placeholder="Your reg" type="text">
    </div>
    <div id="input-help-text" class="input-field__help">contextual help</div>
</div>

Input field with hint and help text

This component renders an input field with both hint and help text sections, providing additional context and instructions to the user. 

<div class="input-field">
    <label for="input-hint-help">label</label>
    <div id="input-hint-text-1" class="input-field__hint">hint text</div>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-hint-help" class="input" name="input" placeholder="Your reg" type="text">
    </div>
    <div id="input-help-text-1" class="input-field__help">contextual help</div>
</div>

Input reg with show help

This component renders an input field with a help section that can be toggled to show or hide additional information. 

<div class="input-field">
    <label for="input-show-help">label</label>
    <details id="input-show-more" class="show-more">
        <summary>
            <span class="underline" data-open="Show More" data-closed="Show Less"></span>
            <span class="material-symbols-rounded" aria-hidden="true">
                stat_minus_1
            </span>
        </summary>
        Lorem ipsum odor amet, consectetuer adipiscing elit.
    </details>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-show-help" class="input" name="input" placeholder="Your reg" type="text">
    </div>
</div>

Input reg with show help and hint text

This component renders an input field with both hint text and a help section that can be toggled to show or hide additional information. 

<div class="input-field">
    <label for="input-show-help-hint">label</label>
    <details id="input-show-more-1" class="show-more">
        <summary>
            <span class="underline" data-open="Show More" data-closed="Show Less"></span>
            <span class="material-symbols-rounded" aria-hidden="true">
                stat_minus_1
            </span>
        </summary>
        Lorem ipsum odor amet, consectetuer adipiscing elit.
    </details>
    <div id="input-hint-text-2" class="input-field__hint">hint text</div>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-show-help-hint" class="input" name="input" placeholder="Your reg" type="text">
    </div>
</div>

Input reg with show help and help text

This component renders an input field with both help text and a help section that can be toggled to show or hide additional information. 

<div class="input-field">
    <label for="input-show-help-help">label</label>
    <details id="input-show-more-2" class="show-more">
        <summary>
            <span class="underline" data-open="Show More" data-closed="Show Less"></span>
            <span class="material-symbols-rounded" aria-hidden="true">
                stat_minus_1
            </span>
        </summary>
        Lorem ipsum odor amet, consectetuer adipiscing elit.
    </details>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-show-help-help" class="input" name="input" placeholder="Your reg" type="text">
    </div>
    <div id="input-help-text-2" class="input-field__help">contextual help</div>
</div>

Input reg with show help and hint text and help text

This component renders an input field with hint text, help text, and a help section that can be toggled to show or hide additional information. 

<div class="input-field">
    <label for="input-show-help-hint-help">label</label>
    <details id="input-show-more-3" class="show-more">
        <summary>
            <span class="underline" data-open="Show More" data-closed="Show Less"></span>
            <span class="material-symbols-rounded" aria-hidden="true">
                stat_minus_1
            </span>
        </summary>
        Lorem ipsum odor amet, consectetuer adipiscing elit.
    </details>
    <div id="input-hint-text-3" class="input-field__hint">hint text</div>
    <div class="input-field__group">
        <div class="input-field__group-addon">
            <div class="icon">
                <img src="/images/UK-flag.svg" alt="UK flag" />
                <img src="/images/UK.svg" alt="UK" />
            </div>
        </div>
        <input id="input-show-help-hint-help" class="input" name="input" placeholder="Your reg" type="text">
    </div>
    <div id="input-help-text-3" class="input-field__help">contextual help</div>
</div>