Input
Boxed text input
<input type="text" class=" input-text input-text--box" value="Test value" placeholder="Placeholder text...">
Display input
<input type="text" class=" input-text" value="Test value" placeholder="Placeholder text...">
Disabled/read-only boxed text input
<input type="text" class=" input-text input-text--box" value="Test value" disabled>
Disabled/read-only display text input
<input type="text" class=" input-text" value="Test value" disabled>
Boxed text input with error
<input type="text" class=" input-text input-text--box has-error" value="Whoops">
Text input with error
<input type="text" class=" input-text has-error" value="Whoops">
Search icon text input
<input type="text" class=" input-text input-text--box input-text--search" value="Test value">
Search icon text input
<input type="text" class=" input-text input-text--search" value="Test value">
Introduction
Basic input and variations used through the UIF.
Usage
| Class name | Effect | Remarks |
|---|---|---|
input[type=text|password|etc] |
Base styling for a text input box | Required. |
.input-text--box |
Placed on an input tag to make the input have a box around it |
Optional. |
.input-text--search |
Placed on an input tag to include a search icon. |
Optional. |
.has-error |
Placed on an input tag to show there is an error.
May be placed on parent tag that will display error styles for all inputs. |
Optional. |