Skip to Main Content
Warning!

This browser is not supported by the Playbook.

You should switch to a supported browser. Learn more

Toolkit
Toolkit

Forms

These are the form components used to create the forms in the Demos. Click on the brackets icon to the right to reveal the code that creates each form element and to see how it renders across different devices.

Input

An input field allows users to enter text into a form. An input field can have a type attribute set to email, search, date, number, tel, text, or url depending on what the user is expected to enter into the input field.

<div class="lsc-input-container">
    <label for="input" class="lsc-label">Input Label</label>
    <input type="text" id="input" name="input" class="lsc-input" />
</div>

Select

A select field allows a user to pick from a pre-determined set of options.

<div class="lsc-input-container lsc-select-container">
    <label for="select" class="lsc-label">Select Label</label>
    <select type="text" id="select" name="select" class="lsc-select">
        <option disabled>Make a Selection</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <span class="lsc-faux-input"></span>
</div>

Text Area

A text area is a larger version of an input field that accepts multiple lines of text.

<div class="lsc-input-container lsc-textarea-container">
    <label for="textarea" class="lsc-label">Textarea Label</label>
    <textarea type="text" id="textarea" name="textarea" class="lsc-textarea"></textarea>
</div>

Checkbox

A checkbox input can be toggled on and off to allow a user to choose from a list of options. Typically multiple selections can be made when using checkboxes. Checkboxes should be contained in a <fieldset> when used in a group.

<div class="lsc-input-container lsc-checkbox-container">
    <input type="checkbox" class="lsc-checkbox" id="lsc-checkbox" />
    <label for="lsc-checkbox" class="lsc-label lsc-checkbox-label">Label Text</label>
    <span class="lsc-faux-input lsc-icon-check-after"></span>
</div>

Radio

A radio input can be toggled on and off to allow a user to choose from a list of options. Only one choice can be selected when using radio inputs.

<div class="lsc-input-container lsc-radio-container">
    <input type="radio" class="lsc-radio" id="radio" name="radio-fieldset" value="radio-value" />
    <label for="radio" class="lsc-label lsc-radio-label">Label Text</label>
    <span class="lsc-faux-input"></span>
</div>

Radio Group

A group of radio inputs should have a <fieldset> that wraps the options and should contain a <legend> for what is being asked of the user.

<fieldset class="lsc-fieldset" id="radio-group">
    <legend class="lsc-legend">Radio Group Legend</legend>
    <div class="lsc-input-container lsc-radio-container">
        <input type="radio" class="lsc-radio" id="radio-option-1" name="radio-group" value="radio-value" />
        <label for="radio-option-1" class="lsc-label lsc-radio-label">Option 1 Label</label>
        <span class="lsc-faux-input"></span>
    </div>
    <div class="lsc-input-container lsc-radio-container">
        <input type="radio" class="lsc-radio" id="radio-option-2" name="radio-group" value="radio-value" />
        <label for="radio-option-2" class="lsc-label lsc-radio-label">Option 2 Label</label>
        <span class="lsc-faux-input"></span>
    </div>
    <div class="lsc-input-container lsc-radio-container">
        <input type="radio" class="lsc-radio" id="radio-option-3" name="radio-group" value="radio-value" />
        <label for="radio-option-3" class="lsc-label lsc-radio-label">Option 3 Label</label>
        <span class="lsc-faux-input"></span>
    </div>
</fieldset>

Submit Button

The submit button allows a user to submit a form.

<button type="submit" class="lsc-button-primary">Submit</button>

Cancel Button

The cancel button allows a user to reset a form to its default state.

<button type="reset" class="lsc-button-secondary">Cancel</button>

Example Form

This is an example of how the form components could come together into a single form. Scroll through the visual demonstration or click on the brackets icon to reveal the code that creates the form.

<form action="#">
    <header class="lsc-form-header">
        <h1 class="lsc-legend">Contact Us</h1>
    </header>
    <div class="lsc-input-container">
        <label for="name" class="lsc-label">Name:</label>
        <input type="text" id="name" name="name" class="lsc-input" />
        <span class="lsc-faux-input"></span>
    </div>
    <div class="lsc-input-container">
        <label for="email" class="lsc-label">Email:</label>
        <input type="email" id="email" name="email" class="lsc-input" />
        <span class="lsc-faux-input"></span>
    </div>
    <div class="lsc-input-container">
        <label for="tel" class="lsc-label">Phone Number:</label>
        <input type="tel" id="tel" name="tel" class="lsc-input" />
        <span class="lsc-faux-input"></span>
    </div>
    <div class="lsc-input-container">
        <label for="zip" class="lsc-label">Zip Code:</label>
        <input type="number" id="zip" name="zip" class="lsc-input" maxlength="5" />
        <span class="lsc-faux-input"></span>
    </div>
    <fieldset class="lsc-fieldset" id="reason">
        <legend class="lsc-legend">Reason for Contact</legend>
        <div class="lsc-input-container lsc-radio-container">
            <input type="radio" class="lsc-radio" id="reason-1" name="reason" value="radio-value" />
            <label for="reason-1" class="lsc-label lsc-radio-label">General Inquiry</label>
            <span class="lsc-faux-input"></span>
        </div>
        <div class="lsc-input-container lsc-radio-container">
            <input type="radio" class="lsc-radio" id="reason-2" name="reason" value="radio-value" />
            <label for="reason-2" class="lsc-label lsc-radio-label">Need Help</label>
            <span class="lsc-faux-input"></span>
        </div>
        <div class="lsc-input-container lsc-radio-container">
            <input type="radio" class="lsc-radio" id="reason-3" name="reason" value="radio-value" />
            <label for="reason-3" class="lsc-label lsc-radio-label">Website Feedback</label>
            <span class="lsc-faux-input"></span>
        </div>
    </fieldset>
    <div class="lsc-input-container lsc-textarea-container">
        <label for="comment" class="lsc-label">Comment:</label>
        <textarea type="text" id="comment" name="comment" class="lsc-textarea"></textarea>
        <span class="lsc-faux-input lsc-faux-textarea"></span>
    </div>
    <div class="lsc-input-container lsc-checkbox-container">
        <input type="checkbox" class="lsc-checkbox" id="consent" />
        <label for="consent" class="lsc-label lsc-checkbox-label">I agree to the terms and conditions</label>
        <span class="lsc-faux-input lsc-icon-check-after"></span>
    </div>
    <div class="lsc-form-controls">
        <input type="submit" class="lsc-button-primary" value="Submit" />
        <button type="reset" class="lsc-button-secondary">Reset</button>
        <a href="#" class="lsc-button-tertiary">Previous Page</a>
    </div>
</form>