Form
table of content
component variations
Form Example
<div class="o-form">
<form aria-label="Example form description">
<h3>Your inquiry</h3>
<h4>Contact data</h4>
<div class="m-form-field">
<div class="a-text-field">
<label for="firstName">First name *</label>
<input type="text" id="text-input-firstName" />
</div>
</div>
<div class="m-form-field">
<div class="a-text-field">
<label for="lastName">Last name *</label>
<input type="text" id="text-input-lastName" />
</div>
</div>
<div class="o-form__row">
<div class="m-form-field">
<div class="a-text-field">
<label for="street">Street</label>
<input type="text" id="text-input-street" />
</div>
</div>
<div class="m-form-field -quarter">
<div class="a-text-field">
<label for="nr">No</label>
<input type="text" id="text-input-nr" />
</div>
</div>
</div>
<div class="o-form__row">
<div class="m-form-field -half">
<div class="a-text-field">
<label for="zip">Zip code</label>
<input type="text" id="text-input-zip" />
</div>
</div>
<div class="m-form-field -half">
<div class="a-text-field">
<label for="city">City</label>
<input type="text" id="text-input-city" />
</div>
</div>
</div>
<div class="m-form-field">
<div class="a-text-field">
<label for="country">Country</label>
<input type="text" id="text-input-country" />
</div>
</div>
<div class="m-form-field">
<div class="a-email-input">
<label for="email-input-email">E-Mail address *</label>
<input type="email" id="email-input-email" name="email" />
</div>
</div>
<div class="m-form-field">
<div class="a-telephone-input">
<label for="telephone-input-telephone">Telephone</label>
<input type="tel" id="telephone-input-telephone" name="telephone" />
</div>
</div>
<h4>Personal password</h4>
<div class="m-form-field">
<div class="a-password-input">
<label for="password-input-password">Password *</label>
<input type="password" id="password-input-password" name="password" />
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
</div>
<div class="m-form-field">
<div class="a-password-input">
<label for="password-input-repeatPasword">Repeat password *</label>
<input
type="password"
id="password-input-repeatPasword"
name="repeatPasword"
/>
<button
type="button"
class="a-password-input__icon-password"
aria-label="LoremIpsum"
>
<i class="a-icon ui-ic-watch-on"></i>
</button>
</div>
</div>
<h4>Asking something</h4>
<p>
Paragraph Text View standard regular Lorem ipsum dolor sit sadipscing
elitr?
</p>
<div class="m-form-field m-form-field--radio">
<div class="a-radio-button">
<input type="radio" id="radio-button-1stopt" name="radioSelect" />
<label for="radio-button-1stopt">First option</label>
</div>
</div>
<div class="m-form-field m-form-field--radio">
<div class="a-radio-button">
<input type="radio" id="radio-button-2ndopt" name="radioSelect" />
<label for="radio-button-2ndopt">Second option</label>
</div>
</div>
<div class="m-form-field m-form-field--radio">
<div class="a-radio-button">
<input type="radio" id="radio-button-3rdopt" name="radioSelect" />
<label for="radio-button-3rdopt">Third option</label>
</div>
</div>
<h4>Space for your remarks</h4>
<div class="m-form-field">
<div class="a-text-area">
<label for="poem">Your poem</label>
<textarea id="poem"></textarea>
</div>
</div>
<h4>Data protection</h4>
<p>
Paragraph Text View standard regular Lorem ipsum dolor sit sadipscing
elitr?
</p>
<div class="m-form-field m-form-field--checkbox">
<div class="a-checkbox">
<input type="checkbox" id="checkbox-agree" />
<label for="checkbox-agree">I agree *</label>
</div>
</div>
<button
type="submit"
class="a-button a-button--primary -without-icon"
data-frok-action="submit"
>
<span class="a-button__label">Submit form</span>
</button>
<p class="-size-s">Required fields *</p>
</form>
</div>
additional content
styles SCSS
@use "sass:math";
.o-form {
margin: 4rem 0;
&__row {
display: flex;
flex-direction: row;
.m-form-field {
margin-left: math.div($formFieldSpacing, 2);
margin-right: math.div($formFieldSpacing, 2);
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
form {
width: 100%;
}
h4 {
margin: 3rem 0 1.5rem;
}
/* stylelint-disable-next-line selector-no-qualifying-type */
button[type='submit'] {
margin: 3rem 0;
}
}