Skip to main content Skip to navigation
View Navigation Comet

#Forms A form enables users to submit information to a web server.

Input

Use the input element for all HTML5 input types.

If the field has an associated error message, include aria-describedby to insure the error message is read by assistive technology.

Copy to Clipboard Press Ctrl + C to copy 
<input class="comet-form__input" type="text">
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_input() }}
                
Macro params reference
disabled
Copy to Clipboard Press Ctrl + C to copy 
<input class="comet-form__input" type="text" disabled>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_input(disabled="true") }}
                
Macro params reference
error
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form--error">
    <input class="comet-form__input" type="text">
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(error="true") %}
    {{ comet.form_input() }}
{% endcall %}
                
Macro params reference
with placeholder
Copy to Clipboard Press Ctrl + C to copy 
<input class="comet-form__input" type="text" placeholder="First Name">
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_input(placeholder="First Name") }}
                
Macro params reference

Textarea

Copy to Clipboard Press Ctrl + C to copy 
<textarea class="comet-form__textarea"></textarea>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_textarea() }}
                
Macro params reference
disabled
Copy to Clipboard Press Ctrl + C to copy 
<textarea class="comet-form__textarea" disabled></textarea>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_textarea(disabled=true) }}
                
Macro params reference
error
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form--error">
    <textarea class="comet-form__textarea"></textarea>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(error=true) %}
    {{ comet.form_textarea() }}
{% endcall %}
                
Macro params reference
with placeholder
Copy to Clipboard Press Ctrl + C to copy 
<textarea class="comet-form__textarea" placeholder="140 chars or less..."></textarea>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_textarea(placeholder="140 chars or less...") }}
                
Macro params reference

Label

Use a label to describe a form control and indicate whether the input is required or optional.

Copy to Clipboard Press Ctrl + C to copy 
<label class="comet-form__label">
    First Name
</label>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_label(text="First Name") }}
                
Macro params reference
required
Copy to Clipboard Press Ctrl + C to copy 
<label class="comet-form__label">
    First Name<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
    <span class="comet-screenreader-only">Required Field.</span>
</label>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_label(text="First Name", required=true) }}
                
Macro params reference
optional
Copy to Clipboard Press Ctrl + C to copy 
<label class="comet-form__label">
    First Name<span class="comet-form__label-optional">
        (Optional)
    </span>
</label>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_label(text="First Name", optional=true) }}
                
Macro params reference

Checkbox

Copy to Clipboard Press Ctrl + C to copy 
<label class="comet-form__checkbox" for="i-accept-the-terms-and-conditions--14532">
    <input id="i-accept-the-terms-and-conditions--14532" type="checkbox" class="comet-form__checkbox-input" />
    <span class="comet-form__checkbox-visual" aria-focusable="false">
        <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
        </svg>
    </span>
    <span class="comet-form__checkbox-text">
        I accept the terms and conditions
    </span>
</label>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_checkbox() }}
                
Macro params reference

Checkbox Group

  • Wrap groups of checkboxes in a fieldset with a legend to label the overall group.
  • Use the .comet-form__label-required-indicator within the legend to indicate that a selection from the group is required
Group, stacked
Select all the days that apply
Copy to Clipboard Press Ctrl + C to copy 
<fieldset class="comet-form__checkbox-group" role="group">
    <legend class="comet-form__checkbox-group-label">
        Select all the days that apply
    </legend>
    <label class="comet-form__checkbox" for="mondays--65739">
        <input id="mondays--65739" type="checkbox" class="comet-form__checkbox-input" />
        <span class="comet-form__checkbox-visual" aria-focusable="false">
            <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
            </svg>
        </span>
        <span class="comet-form__checkbox-text">
            Mondays
        </span>
    </label>
    <label class="comet-form__checkbox" for="tuesdays--81119">
        <input id="tuesdays--81119" type="checkbox" class="comet-form__checkbox-input" />
        <span class="comet-form__checkbox-visual" aria-focusable="false">
            <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
            </svg>
        </span>
        <span class="comet-form__checkbox-text">
            Tuesdays
        </span>
    </label>
    <label class="comet-form__checkbox" for="wednesdays--52480">
        <input id="wednesdays--52480" type="checkbox" class="comet-form__checkbox-input" />
        <span class="comet-form__checkbox-visual" aria-focusable="false">
            <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
            </svg>
        </span>
        <span class="comet-form__checkbox-text">
            Wednesdays
        </span>
    </label>
    <label class="comet-form__checkbox" for="thursdays--22769">
        <input id="thursdays--22769" type="checkbox" class="comet-form__checkbox-input" />
        <span class="comet-form__checkbox-visual" aria-focusable="false">
            <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
            </svg>
        </span>
        <span class="comet-form__checkbox-text">
            Thursdays
        </span>
    </label>
    <label class="comet-form__checkbox" for="fridays--89558">
        <input id="fridays--89558" type="checkbox" class="comet-form__checkbox-input" />
        <span class="comet-form__checkbox-visual" aria-focusable="false">
            <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
            </svg>
        </span>
        <span class="comet-form__checkbox-text">
            Fridays
        </span>
    </label>
</fieldset>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_checkbox_group(label="Select all the days that apply") %}
    {{ comet.form_checkbox(label="Mondays") }}
    {{ comet.form_checkbox(label="Tuesdays") }}
    {{ comet.form_checkbox(label="Wednesdays") }}
    {{ comet.form_checkbox(label="Thursdays") }}
    {{ comet.form_checkbox(label="Fridays") }}
{% endcall %}
                
Macro params reference
Group, horizontal
Select at least one color Required Field.
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form__field-group--horizontal">
    <fieldset class="comet-form__checkbox-group" role="group">
        <legend class="comet-form__checkbox-group-label">
            Select at least one color<abbr class="comet-form__label-required-indicator" title="Please select at least one option." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </legend>
        <label class="comet-form__checkbox" for="red--26221">
            <input id="red--26221" type="checkbox" class="comet-form__checkbox-input" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Red
            </span>
        </label>
        <label class="comet-form__checkbox" for="orange--78795">
            <input id="orange--78795" type="checkbox" class="comet-form__checkbox-input" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Orange
            </span>
        </label>
        <label class="comet-form__checkbox" for="yellow--79441">
            <input id="yellow--79441" type="checkbox" class="comet-form__checkbox-input" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Yellow
            </span>
        </label>
    </fieldset>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(horizontal="true") %}
    {% call comet.form_checkbox_group(label="Select at least one color", required="true") %}
        {{ comet.form_checkbox(label="Red") }}
        {{ comet.form_checkbox(label="Orange") }}
        {{ comet.form_checkbox(label="Yellow") }}
    {% endcall %}
{% endcall %}
                
Macro params reference

Radio Button

Copy to Clipboard Press Ctrl + C to copy 
<label class="comet-form__radio-button" for="choose-this-one--7499">
    <input id="choose-this-one--7499" name="basic-example" value="blue" type="radio" class="comet-form__radio-button-input" />
    <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
    <span class="comet-form__radio-button-text ">
        Choose this one
    </span>
</label>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_radio_button(name="basic-example") }}
                
Macro params reference

Radio Button Group

  • Wrap groups of radio buttons in a fieldset with a legend to label the overall group.
  • Use the .comet-form__label-required-indicator within the legend to indicate that a selection from the group is required
Group, stacked
Select a the day that works best for you
Copy to Clipboard Press Ctrl + C to copy 
<fieldset class="comet-form__radio-button-group" role="radiogroup">
    <legend class="comet-form__radio-button-group-label">
        Select a the day that works best for you
    </legend>
    <label class="comet-form__radio-button" for="mondays--3421">
        <input id="mondays--3421" name="day-of-the-week" value="blue" type="radio" class="comet-form__radio-button-input" checked />
        <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
        <span class="comet-form__radio-button-text ">
            Mondays
        </span>
    </label>
    <label class="comet-form__radio-button" for="tuesdays--3468">
        <input id="tuesdays--3468" name="day-of-the-week" value="blue" type="radio" class="comet-form__radio-button-input" />
        <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
        <span class="comet-form__radio-button-text ">
            Tuesdays
        </span>
    </label>
    <label class="comet-form__radio-button" for="wednesdays--43611">
        <input id="wednesdays--43611" name="day-of-the-week" value="blue" type="radio" class="comet-form__radio-button-input" />
        <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
        <span class="comet-form__radio-button-text ">
            Wednesdays
        </span>
    </label>
    <label class="comet-form__radio-button" for="thursdays--43286">
        <input id="thursdays--43286" name="day-of-the-week" value="blue" type="radio" class="comet-form__radio-button-input" />
        <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
        <span class="comet-form__radio-button-text ">
            Thursdays
        </span>
    </label>
    <label class="comet-form__radio-button" for="fridays--70227">
        <input id="fridays--70227" name="day-of-the-week" value="blue" type="radio" class="comet-form__radio-button-input" />
        <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
        <span class="comet-form__radio-button-text ">
            Fridays
        </span>
    </label>
</fieldset>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_radio_button_group(label="Select a the day that works best for you") %}
    {{ comet.form_radio_button(label="Mondays", name="day-of-the-week", checked=true) }}
    {{ comet.form_radio_button(label="Tuesdays", name="day-of-the-week") }}
    {{ comet.form_radio_button(label="Wednesdays", name="day-of-the-week") }}
    {{ comet.form_radio_button(label="Thursdays", name="day-of-the-week") }}
    {{ comet.form_radio_button(label="Fridays", name="day-of-the-week") }}
{% endcall %}
                
Macro params reference
Group, horizontal
Choose your favorite color Required Field.
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form__field-group--horizontal">
    <fieldset class="comet-form__radio-button-group" role="radiogroup">
        <legend class="comet-form__radio-button-group-label">
            Choose your favorite color<abbr class="comet-form__label-required-indicator" title="You must choose your favorite color" aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </legend>
        <label class="comet-form__radio-button" for="red--96053">
            <input id="red--96053" name="favorite-color" value="blue" type="radio" class="comet-form__radio-button-input" checked />
            <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
            <span class="comet-form__radio-button-text ">
                Red
            </span>
        </label>
        <label class="comet-form__radio-button" for="orange--9275">
            <input id="orange--9275" name="favorite-color" value="blue" type="radio" class="comet-form__radio-button-input" />
            <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
            <span class="comet-form__radio-button-text ">
                Orange
            </span>
        </label>
        <label class="comet-form__radio-button" for="yellow--98753">
            <input id="yellow--98753" name="favorite-color" value="blue" type="radio" class="comet-form__radio-button-input" />
            <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
            <span class="comet-form__radio-button-text ">
                Yellow
            </span>
        </label>
    </fieldset>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(horizontal="true") %}
    {% call comet.form_radio_button_group(label="Choose your favorite color", required="true", required_tooltip_text="You must choose your favorite color") %}
        {{ comet.form_radio_button(label="Red", name="favorite-color", checked=true) }}
        {{ comet.form_radio_button(label="Orange", name="favorite-color") }}
        {{ comet.form_radio_button(label="Yellow", name="favorite-color") }}
    {% endcall %}
{% endcall %}
                
Macro params reference

Select

Use a select element to present a menu of options. To group options organize options using the optgroup element.

Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__select">
    <select class="comet-form__select-input">
        <option class="comet-form__select-option" value="">Select an option</option>
        <option class="comet-form__select-option" value="option_1">Option 1</option>
        <option class="comet-form__select-option" value="option_2">Option 2</option>
    </select>
    <div class="comet-form__select-visual-wrap"></div>
    <span class="comet-form__select-open-indicator">
        <svg class="comet-form__select-open-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#caret-down"></use>
        </svg>
    </span>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_select(
    default_text="Select an option",
    default_value="",
    options=[
        {
            text: "Select an option",
            value: ""
        },
        {
            text: "Option 1",
            value: "option_1"
        },
        {
            text: "Option 2",
            value: "option_2"
        }
    ]) }}
                
Macro params reference
Disabled
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__select comet-form__select-input--disabled">
    <select class="comet-form__select-input" disabled>
        <option class="comet-form__select-option" value="">Select an option</option>
        <option class="comet-form__select-option" value="option_1">Option 1</option>
        <option class="comet-form__select-option" value="option_2">Option 2</option>
    </select>
    <div class="comet-form__select-visual-wrap"></div>
    <span class="comet-form__select-open-indicator">
        <svg class="comet-form__select-open-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#caret-down"></use>
        </svg>
    </span>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_select(disabled=true) }}
                
Macro params reference
Error
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form--error">
    <div class="comet-form__select">
        <select class="comet-form__select-input">
            <option class="comet-form__select-option" value="">Select an option</option>
            <option class="comet-form__select-option" value="option_1">Option 1</option>
            <option class="comet-form__select-option" value="option_2">Option 2</option>
        </select>
        <div class="comet-form__select-visual-wrap"></div>
        <span class="comet-form__select-open-indicator">
            <svg class="comet-form__select-open-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-down"></use>
            </svg>
        </span>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(error=true) %}
    {{ comet.form_select() }}
{% endcall %}
                
Macro params reference
With Option Groups
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__select">
    <select class="comet-form__select-input">
        <option class="comet-form__select-option" value="">Select a sidekick</option>
        <optgroup label="Star Wars">
            <option class="comet-form__select-option" value="chewie">Chewbacca is a really long name and will hopefully wrap if pushed</option>
            <option class="comet-form__select-option" value="3po">C-3PO</option>
            <option class="comet-form__select-option" value="artoo">R2-D2</option>
        </optgroup>
        <optgroup label="Other">
            <option class="comet-form__select-option" value="sam">Samwise Gamgee</option>
            <option class="comet-form__select-option" value="robin">Robin</option>
        </optgroup>
    </select>
    <div class="comet-form__select-visual-wrap"></div>
    <span class="comet-form__select-open-indicator">
        <svg class="comet-form__select-open-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#caret-down"></use>
        </svg>
    </span>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.form_select(
    options=[
        {
            text: "Select a sidekick",
            value: ""
        },
        {
            text: "Star Wars",
            children: [
                {
                    text: "Chewbacca is a really long name and will hopefully wrap if pushed",
                    value: "chewie"
                },
                {
                    text: "C-3PO",
                    value: "3po"
                },
                {
                    text: "R2-D2",
                    value: "artoo"
                }
            ]
        },
        {
            text: "Other",
            children: [
                {
                    text: "Samwise Gamgee",
                    value: "sam"
                },
                {
                    text: "Robin",
                    value: "robin"
                }
            ]
        }
    ]) }}
                
Macro params reference

Microcopy

Include microcopy as smaller text between a label and input to describe the field in greater detail than the label itself.

Your password must contain a letter, a number, and two emoticons
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group">
    <label class="comet-form__label" for="microcopy-password">
        Password
    </label>
    <span class="comet-form__microcopy" id="microcopy-password-help-text">
        Your password must contain a letter, a number, and two emoticons
    </span>
    <input class="comet-form__input" type="password" id="microcopy-password" aria-describedby="microcopy-password-help-text">
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group() %}
    {{ comet.form_label(text="Password", for="microcopy-password") }}
    {{ comet.form_microcopy(text="Your password must contain a letter, a number, and two emoticons", id="microcopy-password-help-text") }}
    {{ comet.form_input(type="password", describedby="microcopy-password-help-text", id="microcopy-password") }}
{% endcall %}
                
Macro params reference

Required Fields Key

Use the required fields key at the start of your form to describe the required fields indicator

Required fields
Copy to Clipboard Press Ctrl + C to copy 
<form class="comet-form" method="post" action="form/processor">
    <span class="comet-form__required-fields-key">Required fields</span>
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="required-fields-first-name">
            First Name<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text" id="required-fields-first-name">
    </div>
</form>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form() %}
    {{ comet.form_required_fields_key() }}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="First Name", required="true", required_text="Please provide your first name", for="required-fields-first-name") }}
        {{ comet.form_input(id="required-fields-first-name") }}
    {% endcall %}
{% endcall %}
                
Macro params reference

Field Error

Display errors below a form control to indicate invalid or missing input.

  • For browser-side form validation, change the field error’s role from role=status to the more aggressive role=alert to gain the screenreader user’s immediate attention.
  • For server-side form validation, post an error Block Message at the top of the form using role=alert to notify the screenreader user.
This field is required
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form--error">
    <label class="comet-form__label" for="field-error-first-name">
        First Name<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="comet-screenreader-only">Required Field.</span>
    </label>
    <input class="comet-form__input" type="text" id="field-error-first-name" aria-describedby="field-error-first-name-error-message">
    <span class="comet-form__field-error" id="field-error-first-name-error-message" role="status">
        <svg class="comet-form__field-error-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#message-error"></use>
        </svg>
        <span class="comet-form__field-error-text">
            This field is required
        </span>
    </span>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(error=true) %}
    {{ comet.form_label(text="First Name", required="true", required_text="Please provide your first name", for="field-error-first-name") }}
    {{ comet.form_input(id="field-error-first-name", describedby="field-error-first-name-error-message") }}
    {{ comet.form_field_error(id="field-error-first-name-error-message") }}
{% endcall %}
                
Macro params reference
Select one or more free gifts to add to your order Required Field. You must select at least one free gift
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form--error">
    <fieldset class="comet-form__checkbox-group" role="group">
        <legend class="comet-form__checkbox-group-label">
            Select one or more free gifts to add to your order<abbr class="comet-form__label-required-indicator" title="Please select at least one option." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </legend>
        <label class="comet-form__checkbox" for="keychain--52983">
            <input id="keychain--52983" type="checkbox" class="comet-form__checkbox-input" aria-describedby="checkbox-error" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Keychain
            </span>
        </label>
        <label class="comet-form__checkbox" for="refrigerator-magnet--23523">
            <input id="refrigerator-magnet--23523" type="checkbox" class="comet-form__checkbox-input" aria-describedby="checkbox-error" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Refrigerator Magnet
            </span>
        </label>
        <label class="comet-form__checkbox" for="bumper-sticker--46563">
            <input id="bumper-sticker--46563" type="checkbox" class="comet-form__checkbox-input" aria-describedby="checkbox-error" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Bumper Sticker
            </span>
        </label>
        <span class="comet-form__field-error" id="checkbox-error" role="status">
            <svg class="comet-form__field-error-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#message-error"></use>
            </svg>
            <span class="comet-form__field-error-text">
                You must select at least one free gift
            </span>
        </span>
    </fieldset>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(error=true) %}
    {% call comet.form_checkbox_group(required="true", label="Select one or more free gifts to add to your order") %}
        {{ comet.form_checkbox(label="Keychain", describedby="checkbox-error") }}
        {{ comet.form_checkbox(label="Refrigerator Magnet", describedby="checkbox-error") }}
        {{ comet.form_checkbox(label="Bumper Sticker", describedby="checkbox-error") }}
        {{ comet.form_field_error(text="You must select at least one free gift", id="checkbox-error") }}
    {% endcall %}
{% endcall %}
                
Macro params reference
Select the greatest sci-fi franchise of all time Required Field. You must answer the question
Copy to Clipboard Press Ctrl + C to copy 
<fieldset class="comet-form__radio-button-group" role="radiogroup">
    <legend class="comet-form__radio-button-group-label">
        Select the greatest sci-fi franchise of all time<abbr class="comet-form__label-required-indicator" title="Please select an option." aria-hidden="true">*</abbr>
        <span class="comet-screenreader-only">Required Field.</span>
    </legend>
    <label class="comet-form__radio-button" for="wars--52897">
        <input id="wars--52897" name="wars-or-trek" value="blue" type="radio" class="comet-form__radio-button-input" aria-describedby="radio-button-error-message" />
        <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
        <span class="comet-form__radio-button-text ">
            Wars
        </span>
    </label>
    <label class="comet-form__radio-button" for="trek--87390">
        <input id="trek--87390" name="wars-or-trek" value="blue" type="radio" class="comet-form__radio-button-input" aria-describedby="radio-button-error-message" />
        <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
        <span class="comet-form__radio-button-text ">
            Trek
        </span>
    </label>
    <span class="comet-form__field-error" id="radio-button-error-message" role="status">
        <svg class="comet-form__field-error-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#message-error"></use>
        </svg>
        <span class="comet-form__field-error-text">
            You must answer the question
        </span>
    </span>
</fieldset>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_radio_button_group(required="true", label="Select the greatest sci-fi franchise of all time") %}
    {{ comet.form_radio_button(label="Wars", name="wars-or-trek", describedby="radio-button-error-message") }}
    {{ comet.form_radio_button(label="Trek", name="wars-or-trek", describedby="radio-button-error-message") }}
    {{ comet.form_field_error(text="You must answer the question", id="radio-button-error-message") }}
{% endcall %}
                
Macro params reference
You must choose an option
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form--error">
    <label class="comet-form__label" for="select-with-error">
        Choose an option<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="comet-screenreader-only">Required Field.</span>
    </label>
    <div class="comet-form__select">
        <select class="comet-form__select-input" id="select-with-error" aria-describedby="select-error-message">
            <option class="comet-form__select-option" value="">Select an option</option>
            <option class="comet-form__select-option" value="option_1">Option 1</option>
            <option class="comet-form__select-option" value="option_2">Option 2</option>
        </select>
        <div class="comet-form__select-visual-wrap"></div>
        <span class="comet-form__select-open-indicator">
            <svg class="comet-form__select-open-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#caret-down"></use>
            </svg>
        </span>
    </div>
    <span class="comet-form__field-error" id="select-error-message" role="status">
        <svg class="comet-form__field-error-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#message-error"></use>
        </svg>
        <span class="comet-form__field-error-text">
            You must choose an option
        </span>
    </span>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(error=true) %}
    {{ comet.form_label(text="Choose an option", required="true", required_text="Please choose one option", for="select-with-error") }}
    {{ comet.form_select(describedby="select-error-message", id="select-with-error") }}
    {{ comet.form_field_error(text="You must choose an option", id="select-error-message") }}
{% endcall %}
                
Macro params reference

Fieldset and Legend

Use a fieldset to group related form controls and divide the form into sections. Use a legend to describe the elements found within a fieldset.

Billing Address
Copy to Clipboard Press Ctrl + C to copy 
<fieldset class="comet-form__fieldset">
    <legend class="comet-form__legend">Billing Address</legend>
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="billing-address-street">
            Street
        </label>
        <input class="comet-form__input" type="text" id="billing-address-street">
    </div>
    <div class="comet-form__field-group comet-form__field-group--horizontal">
        <div class="comet-form__field-group">
            <label class="comet-form__label" for="billing-address-city">
                City
            </label>
            <input class="comet-form__input" type="text" id="billing-address-city">
        </div>
        <div class="comet-form__field-group comet-form__field-group--xs">
            <label class="comet-form__label" for="billing-address-state">
                State
            </label>
            <input class="comet-form__input" type="text" id="billing-address-state" placeholder="CA">
        </div>
        <div class="comet-form__field-group comet-form__field-group--s">
            <label class="comet-form__label" for="billing-address-zip-code">
                ZIP
            </label>
            <input class="comet-form__input" type="text" id="billing-address-zip-code">
        </div>
    </div>
</fieldset>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_fieldset() %}
    {{ comet.form_legend(text="Billing Address") }}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Street", for="billing-address-street") }}
        {{ comet.form_input(id="billing-address-street") }}
    {% endcall %}

    {% call comet.form_field_group(horizontal=true) %}
        {% call comet.form_field_group() %}
            {{ comet.form_label(text="City", for="billing-address-city") }}
            {{ comet.form_input(id="billing-address-city") }}
        {% endcall %}
        {% call comet.form_field_group(class="comet-form__field-group--xs") %}
            {{ comet.form_label(text="State", for="billing-address-state") }}
            {{ comet.form_input(placeholder="CA", id="billing-address-state") }}
        {% endcall %}
        {% call comet.form_field_group(class="comet-form__field-group--s") %}
            {{ comet.form_label(text="ZIP", for="billing-address-zip-code") }}
            {{ comet.form_input(id="billing-address-zip-code") }}
        {% endcall %}
    {% endcall %}
{% endcall %}
                
Macro params reference

Form

Wrap each form with a form tag that includes an action and a method. See additional form examples.

Form contents go here

Copy to Clipboard Press Ctrl + C to copy 
<form class="comet-form" method="get" action="/destination/for/form/data">
    <h4>Form contents go here</h4>
</form>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form(
            method="get", 
            action="/destination/for/form/data") %}
    <h4>Form contents go here</h4>
{% endcall %}
                
Macro params reference

Field Group

Use a field group to pair a form control (such as an input) with a label and include other elements such as field-specific error messages and microcopy. See additional form examples.

If you provide your email address we'll send a receipt for your purchase
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group">
    <label class="comet-form__label" for="full-form-email">
        Email<span class="comet-form__label-optional">
            (Optional)
        </span>
    </label>
    <span class="comet-form__microcopy" id="full-form-email-help-text">
        If you provide your email address we&#39;ll send a receipt for your purchase
    </span>
    <input class="comet-form__input" type="email" id="full-form-email" aria-describedby="full-form-email-help-text">
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group() %}
    {{ comet.form_label(text="Email", optional=true, for="full-form-email") }}
    {{ comet.form_microcopy(text="If you provide your email address we'll send a receipt for your purchase", id="full-form-email-help-text")}}
    {{ comet.form_input(type="email", id="full-form-email", describedby="full-form-email-help-text") }}
{% endcall %}
                
Macro params reference

Dense Forms

Use the dense forms variation when a form needs to fit into a tight space, such as inside a dropdown panel or in a sidebar.

Billing Info
Copy to Clipboard Press Ctrl + C to copy 
<fieldset class="comet-form__fieldset comet-form--dense">
    <legend class="comet-form__legend">Billing Info</legend>
    <div class="comet-form__field-group">
        <label class="comet-form__label">
            Name On Card<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text">
    </div>
    <div class="comet-form__field-group">
        <label class="comet-form__label">
            Credit Card Number<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text">
    </div>
    <div class="comet-form__field-group">
        <label class="comet-form__label">
            Expiration Date<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text" placeholder="MM/YY">
    </div>
    <div class="comet-form__field-group">
        <label class="comet-form__label">
            CVC<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text">
    </div>
</fieldset>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_fieldset(class="comet-form--dense") %}
    {{ comet.form_legend(text="Billing Info") }}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Name On Card", required=true) }}
        {{ comet.form_input() }}
    {% endcall %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Credit Card Number", required=true) }}
        {{ comet.form_input() }}
    {% endcall %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Expiration Date", required=true) }}
        {{ comet.form_input(placeholder="MM/YY") }}
    {% endcall %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="CVC", required=true) }}
        {{ comet.form_input() }}
    {% endcall %}
{% endcall %}

Guidelines

Dense forms is for special use cases only.

  • Never use dense forms when a form is the primary purpose of a page or a modal. For example, never on a registration form, a profile form, or a quiz.
  • Use when a form needs to fit into a relatively tight container, such as a panel or a sidebar.
  • Use for simple forms with only a handful of questions. For more involved forms, give the form more space and use the default styling.

Dense form can solve layout issues with individual form fields.

  • Use dense form on a single form element to tighten its visual style. In the example below, the inline "Other" field has .comet-form--dense applied, allowing it to sit on the same line as a checkbox and label.
  • Use this technique sparingly. Review combined default/dense forms with a designer.
Favorite color from the rainbow Choose as many as you like
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group">
    <fieldset class="comet-form__checkbox-group" role="group">
        <legend class="comet-form__checkbox-group-label">
            Favorite color from the rainbow
        </legend>
        <span class="comet-form__microcopy" id="full-form-color-selection">
            Choose as many as you like
        </span>
        <label class="comet-form__checkbox" for="red--36876">
            <input id="red--36876" type="checkbox" class="comet-form__checkbox-input" aria-describedby="full-form-color-selection" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Red
            </span>
        </label>
        <label class="comet-form__checkbox" for="green--88443">
            <input id="green--88443" type="checkbox" class="comet-form__checkbox-input" aria-describedby="full-form-color-selection" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Green
            </span>
        </label>
        <label class="comet-form__checkbox" for="blue--26267">
            <input id="blue--26267" type="checkbox" class="comet-form__checkbox-input" aria-describedby="full-form-color-selection" />
            <span class="comet-form__checkbox-visual" aria-focusable="false">
                <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                </svg>
            </span>
            <span class="comet-form__checkbox-text">
                Blue
            </span>
        </label>
        <div class="comet-form__field-group comet-form__field-group--horizontal">
            <div class="comet-form__field-group comet-form__field-group--collapse">
                <label class="comet-form__checkbox" for="other--323">
                    <input id="other--323" type="checkbox" class="comet-form__checkbox-input" aria-describedby="full-form-color-selection" />
                    <span class="comet-form__checkbox-visual" aria-focusable="false">
                        <svg class="comet-form__checkbox-checked-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="/comet/comet_assets/comet.svg#check"></use>
                        </svg>
                    </span>
                    <span class="comet-form__checkbox-text">
                        Other
                    </span>
                </label>
            </div>
            <div class="comet-form__field-group">
                <label class="comet-form__label comet-screenreader-only" for="full-form-first-name">
                    Other Color
                </label>
                <input class="comet-form__input comet-form--dense" type="text" id="full-form-first-name" placeholder="Only this field is dense">
            </div>
        </div>
    </fieldset>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group() %}
    {% call comet.form_checkbox_group(label="Favorite color from the rainbow") %}
        {{ comet.form_microcopy(text="Choose as many as you like", id="full-form-color-selection")}}
        {{ comet.form_checkbox(label="Red", describedby="full-form-color-selection") }}
        {{ comet.form_checkbox(label="Green", describedby="full-form-color-selection") }}
        {{ comet.form_checkbox(label="Blue", describedby="full-form-color-selection") }}
        
        {% call comet.form_field_group(horizontal=true) %}
            {% call comet.form_field_group(class="comet-form__field-group--collapse") %}
                {{ comet.form_checkbox(label="Other", describedby="full-form-color-selection") }}
            {% endcall %}
            {% call comet.form_field_group() %}
                {{ comet.form_label(text="Other Color", for="full-form-first-name", class="comet-screenreader-only") }}
                {{ comet.form_input(id="full-form-first-name", class="comet-form--dense",placeholder="Only this field is dense") }}
            {% endcall %}
        {% endcall %}
    {% endcall %}
{% endcall %}

Examples

Contact Form

Copy to Clipboard Press Ctrl + C to copy 
<form class="comet-form" method="post" action="form/processor">
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="contact-form-name">
            Name
        </label>
        <input class="comet-form__input" type="text" id="contact-form-name">
    </div>
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="contact-form-email">
            Email
        </label>
        <input class="comet-form__input" type="email" id="contact-form-email">
    </div>
    <button class="comet-button comet-button--primary">
        Subscribe Now
    </button>
</form>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form() %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Name", for="contact-form-name") }}
        {{ comet.form_input(id="contact-form-name") }}
    {% endcall %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Email", for="contact-form-email") }}
        {{ comet.form_input(type="email", id="contact-form-email") }}
    {% endcall %}
    {{ comet.button(variations=["primary"], text="Subscribe Now") }}
{% endcall %}

Horizontal Arrangement

Dessert or no? Required Field.
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-form__field-group comet-form__field-group--horizontal">
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="horizontal-form-cc-number">
            Credit Card Number<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text" id="horizontal-form-cc-number">
    </div>
    <div class="comet-form__field-group comet-form__field-group--s">
        <label class="comet-form__label" for="horizontal-form-cc-exp-date">
            <abbr title='Expiration'>Exp</abbr> Date<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text" id="horizontal-form-cc-exp-date" placeholder="MM/YY">
    </div>
    <div class="comet-form__field-group comet-form__field-group--xs">
        <label class="comet-form__label" for="horizontal-form-cc-cvc">
            CVC<abbr class="comet-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
            <span class="comet-screenreader-only">Required Field.</span>
        </label>
        <input class="comet-form__input" type="text" id="horizontal-form-cc-cvc">
    </div>
</div>
<div class="comet-form__field-group comet-form__field-group--horizontal">
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="horizontal-form-favorite-food">
            Favorite Food
        </label>
        <input class="comet-form__input" type="text" id="horizontal-form-favorite-food">
    </div>
    <div class="comet-form__field-group">
        <fieldset class="comet-form__radio-button-group" role="radiogroup">
            <legend class="comet-form__radio-button-group-label">
                Dessert or no?<abbr class="comet-form__label-required-indicator" title="Please select an option." aria-hidden="true">*</abbr>
                <span class="comet-screenreader-only">Required Field.</span>
            </legend>
            <label class="comet-form__radio-button" for="dessert-yes">
                <input id="dessert-yes" name="radio-group-dessert" value="yes" type="radio" class="comet-form__radio-button-input" checked />
                <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
                <span class="comet-form__radio-button-text ">
                    Yes, Please
                </span>
            </label>
            <label class="comet-form__radio-button" for="dessert-no">
                <input id="dessert-no" name="radio-group-dessert" value="no" type="radio" class="comet-form__radio-button-input" />
                <span class="comet-form__radio-button-visual" aria-focusable="false"></span>
                <span class="comet-form__radio-button-text ">
                    No, Thank You
                </span>
            </label>
        </fieldset>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form_field_group(horizontal=true) %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Credit Card Number", required=true, for="horizontal-form-cc-number") }}
        {{ comet.form_input(id="horizontal-form-cc-number") }}
    {% endcall %}
    {% call comet.form_field_group(class="comet-form__field-group--s") %}
        {{ comet.form_label(text="<abbr title='Expiration'    >Exp</abbr> Date", required=true, for="horizontal-form-cc-exp-date") }}
        {{ comet.form_input(placeholder="MM/YY", id="horizontal-form-cc-exp-date") }}
    {% endcall %}
    {% call comet.form_field_group(class="comet-form__field-group--xs") %}
        {{ comet.form_label(text="CVC", required=true, for="horizontal-form-cc-cvc") }}
        {{ comet.form_input(id="horizontal-form-cc-cvc") }}
    {% endcall %}
{% endcall %}
{% call comet.form_field_group(horizontal=true) %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Favorite Food", for="horizontal-form-favorite-food") }}
        {{ comet.form_input(id="horizontal-form-favorite-food") }}
    {% endcall %}
    {% call comet.form_field_group() %}
        {% call comet.form_radio_button_group(label="Dessert or no?", required=true) %}
            {{ comet.form_radio_button(id="dessert-yes", value="yes", name="radio-group-dessert", label="Yes, Please", checked=true) }}
            {{ comet.form_radio_button(id="dessert-no", value="no", name="radio-group-dessert", label="No, Thank You") }}
        {% endcall %}
    {% endcall %}
{% endcall %}

Visible Form Container

If you provide your email address we'll send a receipt for your purchase
Copy to Clipboard Press Ctrl + C to copy 
<form class="comet-form comet-form--contained" method="post" action="form/processor">
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="visible-container-first-name">
            First Name
        </label>
        <input class="comet-form__input" type="text" id="visible-container-first-name">
    </div>
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="visible-container-last-name">
            Last Name
        </label>
        <input class="comet-form__input" type="text" id="visible-container-last-name">
    </div>
    <div class="comet-form__field-group">
        <label class="comet-form__label" for="visible-container-email">
            Email<span class="comet-form__label-optional">
                (Optional)
            </span>
        </label>
        <input class="comet-form__input" type="email" id="visible-container-email" aria-describedby="visible-container-email-help-text">
        <span class="comet-form__microcopy" id="visible-container-email-help-text">
            If you provide your email address we&#39;ll send a receipt for your purchase
        </span>
    </div>
    <button class="comet-button comet-button--primary">
        Order Now
    </button>
</form>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.form(class="comet-form--contained") %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="First Name", for="visible-container-first-name") }}
        {{ comet.form_input(id="visible-container-first-name") }}
    {% endcall %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Last Name", for="visible-container-last-name") }}
        {{ comet.form_input(id="visible-container-last-name") }}
    {% endcall %}
    {% call comet.form_field_group() %}
        {{ comet.form_label(text="Email", optional=true, for="visible-container-email") }}
        {{ comet.form_input(type="email", id="visible-container-email", describedby="visible-container-email-help-text") }}
        {{ comet.form_microcopy(text="If you provide your email address we'll send a receipt for your purchase", id="visible-container-email-help-text")}}
    {% endcall %}
    {{ comet.button(variations=["primary"], text="Order Now") }}
{% endcall %}

Full Page Example

Class Reference

Form

Class Applies to Outcome

.comet-form--contained

<form>

Adds a background color to the form

.comet-form--dense

<form>

Increases the visual density of all elements in the form

Field Group

Class Applies to Outcome

.comet-form__field-group--xs

.comet-form__field-group

Sets a max width of 64px on the field group

.comet-form__field-group--s

.comet-form__field-group

Sets a max width of 128px on the field group

.comet-form__field-group--horizontal

.comet-form__field-group

Arranges contained form elements horizontally

.comet-form--error

.comet-form__field-group

Enables error styling for contained label and input elements

Inputs

Class Applies to Outcome

.comet-form--dense

<input>, or the outer container of any input or set of inputs using <fieldset> or <div>

Increases the visual density of the classed element or all contained elements.

Macro Params Reference

Input

Param Values Description

class

false (default) or string

Space separated classes added to the input element

describedby

false (default) or string

Sets the aria-describedby attribute

disabled

true or false (default)

If true adds the disabled attribute

id

false (default) or string

Sets the id attribute

name

false (default) or string

Sets the name attribute

placeholder

false (default) or string

Sets the placeholder attribute

type

'text' (default), 'password', 'datetime', 'date', 'month', 'time', 'week', 'number', 'email', 'url', 'search', 'tel', and 'color'

HTML Input type

value

false (default) or string

Sets the value attribute

Textarea

Param Values Description

class

false (default) or string

Space separated classes added to the base textarea element

describedby

false (default) or string

Sets the aria-describedby attribute

disabled

true or false (default)

Sets the disabled attribute

id

false (default) or string

Sets the id attribute

name

false (default) or string

Sets the name attribute

placeholder

false (default) or string

Sets the placeholder attribute

value

false (default) or string

Sets initial textarea value

Label

Param Default Values Description

class

false

false or string

Space separated classes added to the base label element

for

false

false or string

Sets the for attribute

optional

false

true or false

Adds '(optional)' after label text

required

false

true or false

Adds required indicator after label text

required_tooltip_text

This field is required.

string

Tooltip text that appears when required indicator is hovered

text

First Name

string

Label text

Checkbox

Param Default Values Description

class

false

false or string

Space separated classes added to the outer checkbox element

checked

false

true or false

Sets the checked attribute

describedby

false

false or string

Sets the aria-describedby attribute

disabled

false

true or false

Sets the disabled attribute

id

[text]--[random_number]

false or string

Sets the id attribute and the for attribute on the associated checkbox label

name

false

false or string

Sets the name attribute

label

I accept the terms and conditions

string

Checkbox label text

optional

false

true or false

Adds '(optional)' after label text

required

false

true or false

Adds required indicator after label text

required_tooltip_text

Please check the box.

string

Tooltip text that appears when required indicator is hovered

value

false

false or string

Sets the value attribute

Checkbox Group

Param Default Values Description

class

false

false or string

Space separated classes added to fieldset

label

false

false or string

Legend text

optional

false

true or false

Adds '(optional)' after legend text

required

false

true or false

Adds required indicator after legend text

required_tooltip_text

Please select at least one option.

string

Tooltip text that appears when required indicator is hovered

Radio Button

Param Default Values Description

class

false

false or string

Space separated classes added to the outer radio button element

checked

false

true or false

Sets the checked attribute

describedby

false

false or string

Sets the aria-describedby attribute

disabled

false

true or false

Sets the disabled attribute

id

[text]--[random_number]

false or string

Sets the id attribute and the for attribute on the associated radio button label

name

false

false or string

Sets the name attribute

label

Choose me

string

Label text

optional

false

true or false

Adds '(optional)' after label text

required

false

true or false

Adds required indicator after label text

required_tooltip_text

Please check the box.

string

Tooltip text that appears when required indicator is hovered

value

false

false or string

Sets the value attribute

Radio Button Group

Param Default Values Description

class

false

false or string

Space separated classes added to fieldset

label

false

false or string

Legend text

optional

false

true or false

Adds '(optional)' after legend text

required

false

true or false

Adds required indicator after legend text

required_tooltip_text

Please select at least one option.

string

Tooltip text that appears when required indicator is hovered

Select

Param Default Values Description

class

false

false or string

Space separated classes added to the select element

describedby

false

false or string

Sets aria-describedby attribute

disabled

false

true or false

Sets disabled attribute

id

false

false or string

Sets id attribute

name

false

false or string

Sets name attribute

options

[Select an option, Option 1, Option 2]

array of option objects

An array of options that include the following attributes: text, value, selected (optional), children (optional). If included, children denotes an optgroup

Microcopy

Param Default Values Description

class

false

false or string

Space separated classes added to microcopy wrapper element

id

false

false or string

Sets the id attribute

text

false

false or string

Microcopy text

Required Fields Key

Param Default Values Description

class

false

false or string

Space separated classes added to the required fields key element

text

Required fields

string

Required fields key text

Field Error

Param Default Values Description

class

false

false or string

Space separated classes added to the field error wrapper element

id

false

false or string

Sets the id attribute

text

false

false or string

Field error text

Fieldset

Param Default Values Description

class

false

false or string

Space separated classes added to fieldset

Legend

Param Default Values Description

class

false

false or string

Space separated classes added to legend

text

A grouping of form fields

false or string

Legend text

Form

Param Default Values Description

action

'form/processor'

string

form submission url

class

false

false or string

Space separated classes added to base form

method

'post'

'get' or 'post'

form submission method

Field Group

Param Default Values Description

class

false

false or string

Space separated classes that will be added to div.comet-form__field-group

error

false

true or false

If true, adds .comet-form--error to the field group

horizontal

false

true or false

If true, adds .comet-form__field-group--horizontal to the field group. Any nested form controls will be layed out horizontally. See Horizontal Arrangement

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1