Close

Input

Text boxes allow the user to input a simple text value. A text box only allows for a single line of input.

Your details

Your name

Choose a file… 
<form>
    <fieldset>
        <legend>Your details</legend>
        <div class="field">
            <label class="label" for="textinput">Name</label>
            <div class="control">
                <input id="textinput" name="textinput3" class="input" type="text" />
            </div>
            <p class="help">Your name</p>
        </div>
        <div class="field">
            <label class="label" for="numberinput">Number</label>
            <div class="control">
                <input id="numberinput" name="numberinput3" class="input" type="number" />
            </div>
        </div>
        <div class="field">
            <label class="label" for="emailinput">Email address</label>
            <div class="control">
                <input id="emailinput" name="emailinput3" class="input" type="email" />
            </div>
        </div>
        <div class="field">
            <label class="label" for="passwordinput">Password</label>
            <div class="control">
                <input id="passwordinput" name="passwordinput3" class="input" type="password" />
            </div>
        </div>
        <div class="field">
            <label class="label" for="telinput">Telephone</label>
            <div class="control">
                <input id="telinput" name="telinput3" class="input" type="tel" />
            </div>
        </div>
        <div class="field">
            <label class="label" for="urlinput">Website URL</label>
            <div class="control">
                <input id="urlinput" name="urlinput3" class="input" type="url" />
            </div>
        </div>
        <div class="field">
            <label class="label" for="resume">Upload file</label>
            <div class="file">
                <input class="file-input" type="file" id="resume" name="resume">
                <span class="file-cta">
                    <span class="file-icon">
                    <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Choose a file…
                    </span>
                </span>
            </div>
        </div>
    </fieldset>
</form>

Usage

The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.

Each of them should be wrapped in a .control container.

When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

Use the is-medium or is-large class to create larger input elements.

Accessibility

Use the <label> element to associate text and <input> form control.

Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.

Fieldset and legend should only be used to associate groups of controls when a higher level description is necessary.

If you have any questions or suggestions for improvements, please contact the Web Team.