Basic field with text alongside the input. (Similar to using the inline label)
<div class="c-field">
<div class="c-field__addon">
Text
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div>Change the style of field addon.
<div class="c-field">
<div class="c-field__addon">
Text
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div><div class="c-field">
<div class="c-field__addon | u-bg-white">
Text
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div><div class="c-field">
<div class="c-field__addon | u-bg-green-50 u-tc-green-800">
Text
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div><div class="c-field">
<div class="c-field__addon | u-bg-red-50 u-tc-red-800">
Text
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div><div class="c-field">
<div class="c-field__addon c-field__addon--bare">
Text
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div>Align the addon element left, right, or both, or centrally.
<div class="c-field">
<div class="c-field__addon">
Prepend
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div><div class="c-field">
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
<div class="c-field__addon">
Append
</div>
</div><div class="c-field">
<div class="c-field__addon">
Prepend
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
<div class="c-field__addon">
Append
</div>
</div><div class="c-field">
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
<div class="c-field__addon">
Center
</div>
<input class="c-input c-input--text" type="text" placeholder="This is a text field">
</div>Change the addon element type to a link or button for different use cases.