Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Basic Textfields

There are three size variants for textfields, you need to use the class "input-" followed by "l","m","s" for large, medium, and small respectively.

<input placeholder="..." class="input-l">
                        

Textfields with Italic Text, Round Borders, and Focus Shadow

You need to add class "input-text-italic", "input-round-border", "input-focus" for italic text, round borders and focus shadow respectively.

<input placeholder="..." class="... input-text-italic>
                            <input placeholder="..." class="... input-round-border>
                            <input placeholder="..." class="... input-focus>

Textfields with text-validation

To use texfield styles for text-validation, you can use class "input-valid" & "input-invalid" for valid and invalid inputs respectively.

<input placeholder="..." class="input-valid>
                            <input placeholder="..." class="input-invalid>

Text Area

To use text area, use the class "input-text-area".

<textarea class="input-text-area"></textarea>