Text inputs are used for inputting single line text data.
To render a text input, apply the class a-input
to an input type="text"
,
input type="password"
, input type="email"
, etc.
<input type="text" class="a-input" placeholder="Placeholder">
<input type="text" class="a-input" value="Sample Text" disabled>
To add icons to a text input, wrap the input in a div
using the class
a-inputWrapper
. Next, add the icon as a sibling of the input
and utilize
an icon alignment utility class (e.g. -iconLeft
) to specify where it should be placed.
<div class="a-inputWrapper -iconLeft">
<input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
<div class="a-icon">
<svg>
<use xlink:href="#edit"></use>
</svg>
</div>
</div>
<div class="a-inputWrapper -iconRight">
<input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
<div class="a-icon">
<svg>
<use xlink:href="#edit"></use>
</svg>
</div>
</div>
<div class="a-inputWrapper -iconLeft -iconRight">
<input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
<div class="a-icon">
<svg>
<use xlink:href="#edit"></use>
</svg>
</div>
<div class="a-icon">
<svg>
<use xlink:href="#check"></use>
</svg>
</div>
</div>
Text inputs offer three validation states: -success
, -warning
, and -danger
.
<input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">
<div class="a-inputWrapper -iconRight">
<input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">
<div class="a-icon -success">
<svg>
<use xlink:href="#check"></use>
</svg>
</div>
</div>
<input type="text" class="a-input -warning" placeholder="Placeholder" value="Sample Text">
<div class="a-inputWrapper -iconRight">
<input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">
<div class="a-icon -success">
<svg>
<use xlink:href="#check"></use>
</svg>
</div>
</div>
<input type="text" class="a-input -danger" placeholder="Placeholder" value="Sample Text">
<div class="a-inputWrapper -iconRight">
<input type="text" class="a-input -danger" placeholder="Placeholder" value="Sample Text">
<div class="a-icon -danger">
<svg>
<use xlink:href="#circle-warning"></use>
</svg>
</div>
</div>
Text inputs offer two size modifiers, -small
and -large
.
<input type="text" class="a-input -small" placeholder="Placeholder" value="Sample Text">
<input type="text" class="a-input -large" placeholder="Placeholder" value="Sample Text">