Form
Form
Elements
The component is composed of multiple elements:
formthe wrapperform__titleoptional title or titlesform__contentwrapper for form fields, composed of multipleinputcomponentsform__actionform submit actions, composed of one or multiple button components
<form action="" class="form">
<p class="form__title">Optional form title</p>
<div class="form__content">
<div class="input">
<label for="input" class="input__label">Label</label>
<input type="text" id="input" class="input__control">
</div>
<div class="input select">
<label for="select" class="input__label">Label</label>
<select name="select" id="select" class="input__control">
<option value=""></option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
</div>
</div>
<div class="form__actions">
<button class="button">Submit</button>
</div>
</form>Properties
Add classes to the wrapper class to change the style of the component.
Dense
Make the margins and paddings of the form component smaller.
class="form form--dense"
Card
Add a background color and a box-shadow to the form, as if it was in a card component. This special styling disappears on small devices.
class="form form--card"