BX Swiss Component Library

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. */