Extend textual inputs by adding icons, text, or buttons either side.
<div class="ds-block">
<form class="ds-form">
<div class="ds-form-group">
<label class="ds-label" for="username">Choose username</label>
<div class="ds-input-group">
<div class="ds-input-group__prepend">
<span class="ds-input-group__text">@</span>
</div>
<input class="ds-text-input" type="text" id="username" placeholder="Your username">
</div>
</div>
</form>
<form class="ds-form">
<div class="ds-form-group">
<label class="ds-label" for="email">La Trobe email address</label>
<div class="ds-input-group">
<input class="ds-text-input" type="text" id="email" placeholder="Your email address">
<div class="ds-input-group__append">
<span class="ds-input-group__text">@latrobe.edu.au</span>
</div>
</div>
</div>
</form>
<form class="ds-form">
<div class="ds-form-group">
<label class="ds-label" for="donation">Donation</label>
<div class="ds-input-group">
<div class="ds-input-group__prepend">
<span class="ds-input-group__text">$AUD</span>
</div>
<input class="ds-text-input" type="number" id="donation" placeholder="Your donation amount">
<div class="ds-input-group__append">
<span class="ds-input-group__text">.00</span>
</div>
</div>
</div>
</form>
<form class="ds-form">
<div class="ds-form-group">
<label class="ds-label" for="query_courses">Find your course</label>
<div class="ds-input-group">
<div class="ds-input-group__prepend">
<span class="ds-input-group__text ds-input-group__text--bg-white">
<span class="ds-icon-search ds-icon--red"></span>
</span>
</div>
<input class="ds-text-input" type="search" id="query_courses" placeholder="Search for a course by keyword, course …">
<input type="submit" id="course-search-submit" value="Search">
</div>
</div>
</form>
</div>