Form Row
The form row preserves the bottom margins between form elements.
Each form element should be wrapped in a flix-form-row element.
It behaves as form row and preserves bottom margins between the elements.
<div class="flix-form-row">
<div class="flix-input">
<label class="flix-label flix-input__label" for="form-row-simple">First Input</label>
<div class="flix-input__container">
<input id="form-row-simple" type="text" class="flix-input__field"/>
</div>
</div>
</div>
<div class="flix-form-row">
<div class="flix-input">
<label class="flix-label flix-input__label" for="form-row-simple-2">Second Input</label>
<div class="flix-input__container">
<input id="form-row-simple-2" type="text" class="flix-input__field"/>
</div>
</div>
</div>Small form rows
flix-form-row--small modifier class can be added to the wrapper to display smaller (50% width) elements.
This is specifically useful for such data like postcodes or gender selectors.
Custom space
flix-form-row--space-<value> modifier class can be used to override the space between elements.
<div class="flix-form-row flix-form-row--small flix-form-row--space-4">
<div class="flix-select">
<label class="flix-select__label flix-label" for="form-row-countries">Countries</label>
<div class="flix-select__container">
<select id="form-row-countries" class="flix-select__field">
<option value="1">Germany</option>
<option value="2">France</option>
<option value="3">Austria</option>
<option value="4">The Netherlands</option>
</select>
</div>
</div>
</div>
<div class="flix-form-row flix-form-row--small">
<div class="flix-textarea">
<label class="flix-textarea__label flix-label" for="form-row-last">Text field (Mandatory)</label>
<textarea id="form-row-last" class="flix-textarea__field" required=""></textarea>
</div>
</div>Required inputs
Please pay attention that all required fields must have (Mandatory) word in their labels.
Honeycomb does not provide any "required" field modifiers, so you need to handle this logic on your own modifying the label text.