Input text field
Input text field allows a user to write or edit text. It has a container, label, and may be a placeholder text.
Input default
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="[email protected]" />
</div>
</div>
</div>
Input with help text
We’ll never share your email with anyone else.
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group">
<div class="ds-form--text-group">
<span class="ds-form--help-text">We’ll never share your email with anyone else.</span>
</div>
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="[email protected]" />
</div>
</div>
</div>
Input group
Success! You've done it.
We’ll never share your email with anyone else.
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group flex-column-reverse">
<div class="ds-form--text-group">
<span class="ds-form--alert-text success">Success! You've done it.</span>
<span class="ds-form--help-text">We’ll never share your email with anyone else.</span>
</div>
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="[email protected]" />
</div>
</div>
</div>
Input group with prepend and append
$
00
<div class="ds-form-group">
<label for="value" class="ds-form-label"><span>Value</span></label>
<div class="ds-form-input-group flex-column-reverse">
<div class="ds-form-input-wraper">
<div class="ds-form-prepend"><span>$</span></div>
<input type="text" id="value" class="ds-form-control" placeholder="Please enter a value" />
<div class="ds-form-append"><span>00</span></div>
</div>
</div>
</div>
Input size-small
Set heights using classes like .ds-form-control-sm and .ds-form-control-md.
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control ds-form-control-sm" placeholder="[email protected]" />
</div>
</div>
</div>
Input medium size
Set heights using classes like .ds-form-control-sm and .ds-form-control-md.
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control ds-form-control-md" placeholder="[email protected]" />
</div>
</div>
</div>
Input large size
Set heights using classes like .ds-form-control-sm and .ds-form-control-md.
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control ds-form-control-lg" placeholder="[email protected]" />
</div>
</div>
</div>
Input disabled
<div class="ds-form-input">
<label class="ds-form-label">Email address</label>
<input type="text" class="form-control ds-input ds-form-control-sm" placeholder="[email protected]" disabled="true"/>
</div>
Input disabled readonly
<div class="ds-form-input">
<label class="ds-form-label">Email address</label>
<input type="text" class="form-control ds-input" value="[email protected]" disabled="true" readonly="true"/>
</div>
File input
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Upload file</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="File" id="html" class="ds-form-control ds-file" placeholder="Upload File" />
</div>
</div>
</div>
Input rounded
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control ds-round" placeholder="[email protected]" />
</div>
</div>
</div>
Input dashline
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Email address</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control ds-dashline" placeholder="[email protected]" />
</div>
</div>
</div>
Guidelines
- Input fields must be easily visible.
- For mandatory fields, validate the input text entered by the user.