This component defines the standard visual style for form elements.
Usage Guidelines
Every instance of a form element should come from this component. See the sections below for information about when to use each type of form.
Features
Active is the normal state of the form element. It is available for user interaction.
Focus is initiated when the user interacts with the field. We currently allow the browser to provide default styling for focus states.
Read only indicates that a field is active, but not editable.
Disabled state is a form input that is unavailable for interaction.
Error is used when a field has been filled out incorrectly. This state should always be paired with an explanatory message.
The five basic states. Note that focus is left up to the browser, this is an approximation of the Macintosh style.
Text input form elements are to be used for single line text inputs.
Placeholders can be used to give additional information about the format of data. They should typically not be used to label the input field; exceptions can be made when there is a single field and a secondary purpose indicator exists (like a search bar with a search icon in the attached button).
A smaller size is also available.
Basic and small text inputs with values.
Basic text inputs with labels and placeholders.
Textarea form elements are to be used for multiple lines of text.
Vertical and horizontal resizing options may be enabled where appropriate.
Textarea states are styled similarly to regular text inputs.
They may also take a placeholder like basic text inputs. In this case the placeholder should simply offer additional information or guidance around the data format, it should never replace a label for the field.
A smaller size is available.
Basic and small textareas.
Example placeholder used to provide an example input.
The select input allows a user to choose one of many predetermined options.
A default value can be set for the select element if it’s recommended for most users. Bear in mind that a user can easily overlook a preselected item, so use caution when doing so.
The popup will follow the browser default style.
A smaller variant is available.
Closed and opened select (demonstrating the Mac OS X default browser style); example of the smaller select size.
Radio buttons are for when the user must choose a single item out of several options.
Choose radios over selects when you want the user to carefully consider the options and need to expose all available options.
If there are only two mutually exclusive options, consider using a single checkbox. For example, use a checkbox for “I agree” instead of two radio buttons for “I agree” and “I don’t agree.”
Radio buttons use the default browser style.
Smaller radio buttons are also available.
Basic states for radio buttons; an example of the smaller size.
Checkboxes are for times when the user needs to make one or more binary choices about a related item.
Unlike radio buttons, where a group of radio buttons represents a single choice, each check box in a group represents a separate, independent choice. When there is more than one option but only one can be selected, use a radio button instead.
Checkboxes use the default browser style.
Like the other inputs, checkboxes are also available in a smaller size.
Various checkbox states; an example of the smaller checkbox size.
Labels communicate the purpose and meaning of a field to users.
Try to avoid over-explaining in the label (password requirements, for example, should be communicated in another way).
Labels come in one size but can be used for both standard and small inputs.
Use the label to indicate whether a given field is required or optional. Only label the minority case (for example, if 6 fields are required and 2 are optional, only indicate the optional fields).
There is a standard search component which extends the basic text input with a integrated button on the right.
Because this includes the button which indicates purpose the placeholder can serve as the input label (although this isn’t required).
Search only comes in the standard size right now.
Search input with integrated button.
Active text field, with both a value and a placeholder.
Small text inputs.
Readonly and disabled states.
Focus (reproduction of Mac OS X style) and error states.
Basic text area.
Small text area redlines.
Readonly and disabled states.
Focus (reproduction of Mac OS X browser default) and error states.
Closed and open select (showing a browser default style); small select example.
Example radio buttons in the Mac OS X browser style.
Example checkboxes in the Mac OS X browser style.
Labels name each field.
Only label whichever type occurs less frequently (e.g. if there are four required fields and one optional only notate the single optional field).
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Text Input | [](/design/c/inputs/v1.0.0-beta.5/#rd-text-input) |
| Textarea | [](/design/c/inputs/v1.0.0-beta.5/#rd-textarea) |
| Select Input | [](/design/c/inputs/v1.0.0-beta.5/#rd-select-input) |
| Radio Button | [](/design/c/inputs/v1.0.0-beta.5/#rd-radio-button) |
| Checkbox | [](/design/c/inputs/v1.0.0-beta.5/#rd-checkbox) |
| Label | [](/design/c/inputs/v1.0.0-beta.5/#rd-label) |
| Search Input | [](/design/c/inputs/v1.0.0-beta.5/#rd-search-input) |
Initial version
Inputs