Form inputs (text)

Allows the user to specify inputs when generating an instance of the report. For example, checkboxes and drop-down fields.

Code

While these code examples omit it for the sake of brevity, all <label> and <input> tags must always be nested in a <form> tag. Pay careful attention to the relationships of the for and id attributes.

Text Input

This is a standard HTML text input. CDS works with both label tags separate from the input and label tags that surround the input.

Standard

<form class={form-size}>
    <label for="field">Text Input</label>
    <input type="text" class="{input-size} {icon}" id="field">
</form>
Text Input Demo

Alternate

<form class="{form-size}">
    <label for="field">
        <input type="text" class="{input-size} {icon}" id="field">
    </label>
</form>
Text Input Demo

Text Input with Description

This is a standard HTML input where there is helper text. You must assign an id attribute to the HTML tag with the description, then add aria-describedby to the <input> tag with the value as the id of the description.

<form class="{form-size}">
    <label for="field"></label>
    <input type="text" class="{input-size} {icon}" id="field" name="field" size="32" placeholder="Text" aria-describedby="field_desc">
    <div id="field_desc" class="description"></div>
</form>
Text input with Description Demo

Text Area

The rows attribute will always be honored when present. If no rows is defined, the <textarea> will display roughly 4 rows. As a safeguard, the cols attributes will only be honored if the .native-size class is also present.

<form class="{form-size}">
    <label for="textarea-box">Text Area</label>
    <textarea id="textarea-box" class="{input-size} {icon}" rows="4" cols="50"></textarea>
</form>
Text Area demo

Classes

To implement a style other than the default, add the class in question to the bracketed part of the code snippet.

{form-size}

Changes the behavior of all inputs within a form tag.

Class Description
Default (no class) The input will have a maximum width of 600px.
.native-size Entirely override fluid sizing and honor HTML-defined size attributes. This should be used with caution, since attributes like size and cols can override max-width constraints.
.no-constrain Eliminates the maximum 600px width of <input>, <textarea>, and <select> tags. 
<form>
    <label for="field">Normal Text Input</label>
    <input type="text" class="native-size" id="field" name="field" size="32" placeholder="Text">
</form>
<form class="native-size">
    <label for="field">Native Size Text Input</label>
    <input type="text" class="native-size" id="field" name="field" size="32" placeholder="Text">
</form>
<form class="no-constrain">
    <label for="field">No Constraint Text Input</label>
    <input type="text" id="field" name="field" size="32" placeholder="Text">
</form>
Form Size Demo

{input-size}

Changes the size of the individual inputs.

Class Description
Default (no class) <input>, <textarea>, and <select> tags (along with their labels and description boxes) will generally fill the width of their container by default, but with a maximum width of 600px. To override this maximum width, see {form-size} below.
.native-size Override fluid sizing entirely and honor HTML-defined size attributes for single inputs. This should be used with caution, since attributes like size and cols can override max-width constraints. 
<form>
    <label for="field">Text Input</label>
    <input type="text" class="native-size" id="field" name="field" size="32" placeholder="Text">
</form>
Native Size Demo

{icon}

Specialty Text (.icon)

By default, specialty text fields mimic the look and behavior of basic text fields. However, the optional .icon class on an input will add a thematic background icon.

Developer Notes

Use the .native-size class on an individual input (or a whole <form>) to override fluid sizing entirely and honor HTML-defined size attributes. This should be used with caution, since attributes like size and cols can override max-width constraints.