Form
Forms are used to send and collect data.
You can easely build forms using the following components:
Example
<form style="display: flex; flex-direction: column; gap: 24px;">
<h3>Create account</h3>
<div class="nj-form-item">
<div class="nj-form-item__field-wrapper">
<input type="text" class="nj-form-item__field" id="exampleInputEmail" placeholder="default" required>
<label for="exampleInputEmail" class="nj-form-item__label">Email</label>
</div>
</div>
<div class="nj-form-item nj-form-item--password">
<div class="nj-form-item__field-wrapper">
<input type="password" class="nj-form-item__field" id="examplePassword" placeholder="password" required>
<label for="examplePassword" class="nj-form-item__label">Password</label>
<i class="nj-form-item__icon material-icons" tabindex="0">visibility</i>
</div>
<div class="nj-form-item__subscript">Must be at least 14 characters long</div>
</div>
<div class="nj-checkbox">
<label>
<input type="checkbox"> I acknoledge ...
</label>
</div>
<button class="nj-btn nj-btn--block" type="submit">Create account</button>
</form>
<form style="display: flex; flex-direction: column; gap: 24px;">
<h3>Contact form</h3>
<div class="nj-form-item">
<div class="nj-form-item__field-wrapper">
<input type="text" class="nj-form-item__field" id="contactFormInputEmail" placeholder="default" required>
<label for="contactFormInputEmail" class="nj-form-item__label">Email</label>
</div>
</div>
<div class="nj-form-item">
<div class="nj-form-item__field-wrapper">
<input type="text" class="nj-form-item__field" id="contactFormInputFirstName" placeholder="default">
<label for="contactFormInputFirstName" class="nj-form-item__label">Firstname</label>
</div>
</div>
<div class="nj-form-item">
<div class="nj-form-item__field-wrapper">
<input type="text" class="nj-form-item__field" id="contactFormInputLastName" placeholder="default">
<label for="contactFormInputLastName" class="nj-form-item__label">Lastname</label>
</div>
</div>
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
<input class="nj-form-item__field" id="exampleSelect" placeholder=" " readonly/>
<label for="exampleSelect" class="nj-form-item__label">How did you hear about us?</label>
<div class="nj-form-item__list nj-list-group nj-list-group--no-border nj-list-group--sm">
<button type="button" class="nj-list-group__item">Option 1</button>
<button type="button" class="nj-list-group__item">Option 2</button>
<button type="button" class="nj-list-group__item">Option 3</button>
<button type="button" class="nj-list-group__item">Option 4</button>
</div>
<i class="nj-form-item__icon material-icons">keyboard_arrow_down</i>
</div>
</div>
<div class="nj-form-item nj-form-item--textarea">
<div class="nj-form-item__field-wrapper">
<textarea class="nj-form-item__field" id="contactFormTextAreaFloat" placeholder="Comment"></textarea>
<label for="contactFormTextAreaFloat" class="nj-form-item__label">Comment</label>
</div>
</div>
<div class="d-flex">
<button class="nj-btn" type="submit">Reach out</button>
</div>
</form>