Foundation Input Sizing

Foundation provides flexible input sizing controls. This chapter will introduce how to control the size of form elements.

Default Size

Foundation inputs default to full container width:

<input type="text" placeholder="Default width input">

Using Grid to Control Width

Control input width through the grid system:

<div class="grid-x grid-margin-x">
    <div class="cell small-3">
        <input type="text" placeholder="25% width">
    </div>
    <div class="cell small-6">
        <input type="text" placeholder="50% width">
    </div>
    <div class="cell small-3">
        <input type="text" placeholder="25% width">
    </div>
</div>

Responsive Width

<div class="grid-x grid-margin-x">
    <!-- Full width on small screens, 50% on medium, 33% on large -->
    <div class="cell small-12 medium-6 large-4">
        <input type="text" placeholder="Responsive width">
    </div>
</div>

Input Height

Custom Height

<style>
    input.small-input {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    input.large-input {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<input type="text" class="small-input" placeholder="Small input">
<input type="text" placeholder="Default input">
<input type="text" class="large-input" placeholder="Large input">

Input Group Size

<style>
    .input-group.small .input-group-label,
    .input-group.small .input-group-field,
    .input-group.small .button {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    .input-group.large .input-group-label,
    .input-group.large .input-group-field,
    .input-group.large .button {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<div class="input-group small">
    <span class="input-group-label">@</span>
    <input class="input-group-field" type="text" placeholder="Small">
    <div class="input-group-button">
        <button class="button" type="button">Submit</button>
    </div>
</div>

<div class="input-group large">
    <span class="input-group-label">@</span>
    <input class="input-group-field" type="text" placeholder="Large">
    <div class="input-group-button">
        <button class="button" type="button">Submit</button>
    </div>
</div>

Textarea Size

<!-- Control height with rows -->
<textarea rows="3" placeholder="3 rows height"></textarea>
<textarea rows="6" placeholder="6 rows height"></textarea>

<!-- Fixed height -->
<textarea style="height: 200px;" placeholder="Fixed height"></textarea>

<!-- Auto-resizing -->
<textarea style="resize: vertical; min-height: 100px;" placeholder="Resizable height"></textarea>

Select Box Size

<style>
    select.small-select {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    select.large-select {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<select class="small-select">
    <option>Small select</option>
</select>

<select>
    <option>Default select</option>
</select>

<select class="large-select">
    <option>Large select</option>
</select>

Form Size Utility Classes

Create unified size classes:

<style>
    /* Small form elements */
    .form-small input,
    .form-small select,
    .form-small textarea,
    .form-small .button {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

    /* Large form elements */
    .form-large input,
    .form-large select,
    .form-large textarea,
    .form-large .button {
        height: 3.5rem;
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
</style>

<form class="form-small">
    <input type="text" placeholder="Small form">
    <button class="button" type="submit">Submit</button>
</form>

<form class="form-large">
    <input type="text" placeholder="Large form">
    <button class="button" type="submit">Submit</button>
</form>

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Input Sizing Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        /* Size classes */
        .input-small,
        select.input-small {
            height: 2rem !important;
            padding: 0.25rem 0.5rem !important;
            font-size: 0.875rem !important;
        }
        .input-large,
        select.input-large {
            height: 3.5rem !important;
            padding: 0.75rem 1rem !important;
            font-size: 1.25rem !important;
        }

        .input-group.small .input-group-label,
        .input-group.small .input-group-field,
        .input-group.small .button {
            height: 2rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            line-height: 1.5rem;
        }
        .input-group.large .input-group-label,
        .input-group.large .input-group-field,
        .input-group.large .button {
            height: 3.5rem;
            padding: 0.75rem 1rem;
            font-size: 1.25rem;
            line-height: 2rem;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Input Sizing Showcase</h1>

        <div class="demo-section">
            <h3>Input Height</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>Small Input</label>
                    <input type="text" class="input-small" placeholder="Small">
                </div>
                <div class="cell medium-4">
                    <label>Default Input</label>
                    <input type="text" placeholder="Default">
                </div>
                <div class="cell medium-4">
                    <label>Large Input</label>
                    <input type="text" class="input-large" placeholder="Large">
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Grid Controlled Width</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell small-3">
                    <input type="text" placeholder="3 columns">
                </div>
                <div class="cell small-4">
                    <input type="text" placeholder="4 columns">
                </div>
                <div class="cell small-5">
                    <input type="text" placeholder="5 columns">
                </div>
            </div>
            <br>
            <div class="grid-x grid-margin-x">
                <div class="cell small-6">
                    <input type="text" placeholder="6 columns (50%)">
                </div>
                <div class="cell small-6">
                    <input type="text" placeholder="6 columns (50%)">
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Select Box Size</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>Small Select</label>
                    <select class="input-small">
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </div>
                <div class="cell medium-4">
                    <label>Default Select</label>
                    <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </div>
                <div class="cell medium-4">
                    <label>Large Select</label>
                    <select class="input-large">
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Input Group Size</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>Small Input Group</label>
                    <div class="input-group small">
                        <span class="input-group-label">@</span>
                        <input class="input-group-field" type="text" placeholder="Username">
                        <div class="input-group-button">
                            <button class="button" type="button">Submit</button>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <label>Default Input Group</label>
                    <div class="input-group">
                        <span class="input-group-label">@</span>
                        <input class="input-group-field" type="text" placeholder="Username">
                        <div class="input-group-button">
                            <button class="button" type="button">Submit</button>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <label>Large Input Group</label>
                    <div class="input-group large">
                        <span class="input-group-label">@</span>
                        <input class="input-group-field" type="text" placeholder="Username">
                        <div class="input-group-button">
                            <button class="button" type="button">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Textarea Size</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <label>3 Rows Height</label>
                    <textarea rows="3" placeholder="3 rows"></textarea>
                </div>
                <div class="cell medium-4">
                    <label>5 Rows Height</label>
                    <textarea rows="5" placeholder="5 rows"></textarea>
                </div>
                <div class="cell medium-4">
                    <label>Resizable Height</label>
                    <textarea rows="3" style="resize: vertical;" placeholder="Draggable"></textarea>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Responsive Width</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell small-12 medium-6 large-4">
                    <label>Responsive Input</label>
                    <input type="text" placeholder="Small 100%, Medium 50%, Large 33%">
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

Input Sizing Best Practices

Consistency: Keep element sizes consistent within the same form
Touch-friendly: Mobile input height should be at least 44px
Responsiveness: Adjust input width based on screen size
Readability: Ensure font size is appropriate

Summary

In this chapter, we learned:

Using grid to control input width
Customizing input height
Input group sizing
Responsive inputs

Next chapter, we will learn Foundation Switch.

#Foundation Input Sizing

#Default Size

#Using Grid to Control Width

#Responsive Width

#Input Height

#Custom Height

#Input Group Size

#Textarea Size

#Select Box Size

#Form Size Utility Classes

#Complete Example

#Input Sizing Best Practices

#Summary