Form Inputs

Inputs, Textareas, and Selects (along with their labels and description boxes) will generally fill the width of their container by default, but with a maximum width of 600px. This 600px limit can be bypassed by including a .no-constrain class on the <form> tag. 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.

Basic Text

Flux Components

This legend is read by screen readers, but should not be visible. Text Input
Text Input (with .native-size class)
Text Input with Description
This description text provides additional instruction or formatting hints.

Cornell Design System HTML

This legend is read by screen readers, but should not be visible.
This description text provides additional instruction or formatting hints.

Extended Examples

Text Input with Description Before This description text provides additional instruction or formatting hints.
Required Input
Input with Error
Input with Error and Description
A field that shows an error message.
Unconstrained Text Input
By default, form fields and their associate labels and descriptions will fill all available width. form.no-constrain option lifts this limit limits these elements to 600px maximum width, which may be desirable in some cases where fields being wider than this will begin to lose their "field" appearance to the visitor's eyes.
Terms and Conditions Please review our terms and conditions before proceeding.
I agree to the terms and conditions
Notification Preferences
Email
Text message
Push Notifications
Industry
What is the purpose of the site? Describe what the site is used for and what kinds of information exist on it.
Styles
Text
Heading 1
Heading 2
Heading 3
Bold ⌘B
Italic ⌘I
Underline ⌘U
Bullet list
Ordered list
Blockquote ⌘+Shift+B
Insert link ⌘K
Insert link
Unlink
Code ⌘E
Undo ⌘Z
Redo ⌘+Shift+Z