# Form

The form component should be used whenever a form element is present on the page.

## Form Action

This element is used to add proper spacing to action elements in a form, like buttons.

``` <form class="form"> <div class="field "> <label for="name" class="field__label">Name</label> <input id="name" type="text" name="field-name" class="field__input" required> </div> <div class="field "> <label for="email" class="field__label">Email address</label> <input id="email" type="email" name="field-name" class="field__input" required> </div> <div class="field "> <label for="password" class="field__label">Password</label> <input id="password" type="password" name="field-name" class="field__input" required> </div> <div class="form__action"> <input id="field-id" type="checkbox" name="field-name"> <label for="field-id" class="">Remember me</label> </div> <div class="form__action"> <button class="button button--primary">Submit</button> </div> <div class="form__action"> <a href="#">Forgot password</a> </div> </form> ```
``` <form class="form"> {{> @field id="name" label="Name" type="text" required=true}} {{> @field id="email" label="Email address" type="email" required=true}} {{> @field id="password" label="Password" type="password" required=true}} <div class="form__action"> {{> @input type="checkbox"}} {{> @form-label text="Remember me"}} </div> <div class="form__action"> {{> @button label="Submit" modifier="button--primary"}} </div> <div class="form__action"> <a href="#">Forgot password</a> </div> </form> ```
``` /* No context defined for this component. */ ```
• Handle: @form
• Preview:
• Filesystem Path: Source\components\06-components\form\form.hbs
• References (4):