Input fields

Input fields refer specifically to the text input fields, which are used to obtain data from the users.

Basic example

A basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input. Both elements are wrapped in .cd-outline class which provides a material design look.

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Types

Input types let you specified what data users should provide and help you validate it.

Text input

Email input

Password input

Number input

Phone number input

URL input

Textarea

Text

Block-level or inline-level form text can be created using .cd-form-text.

Associating form text with form controls Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.

Form text below inputs can be styled with .cd-form-text. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.