Form Layout
Input text field allows a user to write or edit text. It has a container, label, and may be a placeholder text.
<form class="row">
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Type</span></label>
<div class="ds-form-set">
<div class="ds-form-radio-group">
<input class="ds-radio" type="radio" id="external" name="arranger" checked="true" />
<label class="ds-radio-label" for="external">External</label>
</div>
<div class="ds-form-radio-group">
<input class="ds-radio" type="radio" id="internal" name="arranger" />
<label class="ds-radio-label" for="internal">Internal</label>
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Deal Name</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="Type a deal name" />
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Name</span></label>
<div class="flex justify-between width-100 col-gap-20 ">
<div class="ds-form-input-group width-100">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="Person name" />
</div>
</div>
<button class="ds-btn ds-btn-primary"><i class="icon-user-2"></i>Find</button>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Email</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="email" id="html" class="ds-form-control" placeholder="Arranger email" />
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Company</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="email" id="html" class="ds-form-control" placeholder="Comapany name" />
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Secondary FO name</span></label>
<div class="flex justify-between width-100 col-gap-20 ">
<div class="ds-form-input-group width-100">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="Person name" />
</div>
</div>
<button class="ds-btn ds-btn-primary"><i class="icon-user-2"></i>Find</button>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Select any agency role</span></label>
<div class="ds-form-set">
<div class="ds-form-checkbox-group">
<input class="ds-checkbox" type="checkbox" id="agency-role" />
<label class="ds-checkbox-label" for="agency-role">Facility agent role</label>
</div>
<div class="ds-form-checkbox-group">
<input class="ds-checkbox" type="checkbox" id="agent-role" checked="" />
<label class="ds-checkbox-label" for="agent-role">Security agent role</label>
</div>
</div>
</div>
<button class="ds-btn ds-btn-primary ds-btn-lg ds-block-btn mt20">Create Deal</button>
</form>
<form class="row">
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Type</span></label>
<div class="ds-form-set">
<div class="ds-form-radio-group">
<input class="ds-radio" type="radio" id="external" name="arranger" checked="true" />
<label class="ds-radio-label" for="external">External</label>
</div>
<div class="ds-form-radio-group">
<input class="ds-radio" type="radio" id="internal" name="arranger" />
<label class="ds-radio-label" for="internal">Internal</label>
</div>
</div>
</div>
<div class="flex col-gap-20">
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Deal Name</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="Type a deal name" />
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Name</span></label>
<div class="flex justify-between width-100 col-gap-20 ">
<div class="ds-form-input-group width-100">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="Person name" />
</div>
</div>
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Email</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="email" id="html" class="ds-form-control" placeholder="Arranger email" />
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Message</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<textarea type="message" id="html" class="ds-form-control" placeholder="Type message here"></textarea>
</div>
</div>
</div>
<div class="flex col-gap-20">
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Arranger Company</span></label>
<div class="ds-form-input-group">
<div class="ds-form-input-wraper">
<input type="email" id="html" class="ds-form-control" placeholder="Comapany name" />
</div>
</div>
</div>
<div class="ds-form-group">
<label for="email" class="ds-form-label"><span>Secondary FO name</span></label>
<div class="ds-form-input-group width-100">
<div class="ds-form-input-wraper">
<input type="text" id="html" class="ds-form-control" placeholder="Person name" />
</div>
</div>
</div>
</div>
<div class="ds-form-group ds-form-group-inline">
<label for="email" class="ds-form-label"><span>Select any agency role</span></label>
<div class="ds-form-set-block">
<div class="ds-form-checkbox-group">
<input class="ds-checkbox" type="checkbox" id="agency-role" />
<label class="ds-checkbox-label" for="agency-role">Facility agent role</label>
</div>
<div class="ds-form-checkbox-group">
<input class="ds-checkbox" type="checkbox" id="agent-role" checked="" />
<label class="ds-checkbox-label" for="agent-role">Security agent role</label>
</div>
</div>
</div>
<button class="ds-btn ds-btn-primary ds-btn-lg ds-block-btn mt20">Create Deal</button>
</form>