Check with your designers to help you design this section
Check with your designers to help you design this section
Forms are now built on top of Bootstrap's form components. At some point RAUL only supported custom classes and markup structures. If your product has already developed with this structure, you can continue to use it. It will be available throughout RAUL version 2. In general, since we require the Bootstrap library for RAUL, v2 will try to take as much advantage of it as possible.
Below is an example of a basic form with a couple basic elements. Inputs and checkboxes. If you are trying to relate these in the Bootstrap documentation, the inputs are basic form-controls, while the checkboxes are custom-controls.
<form>
<div class="form-group">
<label for="email">Email address</label>
<input
type="email"
class="form-control"
id="email"
aria-describedby="email-help"
placeholder="Enter email"
/>
<small id="email-help" class="form-text text-muted">
We'll never share your email with anyone else.
</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="accept-terms">
<label class="custom-control-label" for="accept-terms">
Accept random terms and conditions
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<form>
<div class="form-group">
<div class="row align-items-center">
<div class="col-auto">
<label for="search-by-select-example" class="mb-0">
Search by
</label>
</div>
<div class="col">
<div class="row no-gutters">
<div class="col col-lg-5 col-xl-3">
<div class="form-control-wrapper">
<select class="form-control custom-select" id="search-by-select-example">
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div class="form-icon-box">
<i class="fa fa-chevron-down form-icon form-icon-arrow" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col">
<div class="form-control-wrapper">
<input
type="search"
name="search-by-example"
class="form-control"
id="search-by-example"
placeholder="Placeholder"
/>
<div class="form-icon-box">
<i
class="fa fa-search form-icon form-icon-search form-icon-grey"
aria-hidden="true"
>
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
An example of a slightly more complex form
<h3 class="mb-3">Primary Guest</h3>
<div class="primary-guest mb-3 row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label text-nowrap" for="primary-first-name">
First Name <sup>*</sup>
</label>
<input
class="form-control first-name"
name="primary-first-name"
maxlength="40"
type="text"
value=""
/>
</div>
<div class="form-group">
<label class="control-label" for="primary-middle-initial">Middle Initial</label>
<input
class="form-control"
name="primary-middle-initial"
maxlength="1"
type="text"
value=""
/>
</div>
<div class="form-group required-if-visible">
<label class="control-label text-nowrap" for="primary-last-name">
Last Name <sup>*</sup>
</label>
<input
class="form-control"
name="primary-last-name"
maxlength="40"
type="text"
value=""
/>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label text-nowrap" for="primary-email">Email</label>
<input
class="email form-control"
name="primary-email"
maxlength="90"
type="text"
value=""
/>
</div>
<div class="form-group">
<label class="control-label text-nowrap" for="primary-phone">Phone</label>
<input
class="form-control"
name="primary-phone"
maxlength="40"
type="text"
value=""
/>
<span class="need-one-contact-error"></span>
</div>
<div class="form-group">
<div class="form-control-wrapper">
<select class="form-control custom-select" name="contact-type">
<option>Preferred Contact</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="pigeon">IP over Carrier Pigeon</option>
</select>
<div class="form-icon-box">
<i class="fa fa-chevron-down form-icon form-icon-arrow" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<div class="custom-control custom-switch custom-switch-space-between mb-3">
<input type="checkbox" class="custom-control-input" id="secondary-guest-switch" checked>
<h3 class="custom-switch-text">Secondary Guest</h3>
<label class="custom-control-label" for="secondary-guest-switch"></label>
</div>
<div class="secondary-guest mb-3 row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label text-nowrap" for="secondary-first-name">
First Name <sup>*</sup>
</label>
<input
class="form-control first-name"
name="secondary-first-name"
maxlength="40"
type="text"
value=""
/>
</div>
<div class="form-group">
<label class=" control-label" for="secondary-middle-initial">Middle Initial</label>
<input
class="form-control"
name="secondary-middle-initial"
maxlength="1"
type="text"
value=""
/>
</div>
<div class="form-group required-if-visible">
<label class=" control-label text-nowrap" for="secondary-last-name">
Last Name <sup>*</sup>
</label>
<input
class="form-control"
name="secondary-last-name"
maxlength="40"
type="text"
value=""
/>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label text-nowrap" for="secondary-email">Email</label>
<input
class="email form-control"
name="secondary-email"
maxlength="90"
type="text"
value=""
/>
</div>
<div class="form-group">
<div class="form-control-wrapper">
<select class="form-control custom-select" name="secondary-relation">
<option>Relation to Primary Guest</option>
<option value="spouse">Spouse</option>
<option value="family">Family Member</option>
<option value="friend">Friend</option>
</select>
<div class="form-icon-box">
<i class="fa fa-chevron-down form-icon form-icon-arrow" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="button button-primary">
Save
</button>
<button type="button" class="button button-link">
Cancel
</button>
The following are a series of elements you can use to build your team's forms. It is genrally best practice to discuss layouts with design and devs when developing visual solutions to product requirements. Designers can help guide through best practices and proposed layouts.
<div class="form-group">
<label for="example-input-1">Field Label</label>
<input
type="text"
name="example-input-1"
class="form-control"
id="example-input-1"
placeholder="Placeholder"
aria-describedby="example-input-1-help"
/>
<small id="example-input-1-help" class="form-text text-muted">
Example of helper for above input
</small>
</div>
<div class="form-group">
<label for="example-input-2">Field Label</label>
<input
type="text"
name="example-input-2"
class="form-control"
id="example-input-2"
placeholder="Placeholder"
value="Example"
/>
</div>
<div class="form-group">
<label class="sr-only" for="example-input-3"></label>
<input
type="text"
name="example-input-3"
class="form-control"
id="example-input-3"
placeholder="Placeholder"
/>
</div>
<div class="form-group">
<label class="sr-only" for="example-input-4"></label>
<input
type="text"
name="example-input-4"
class="form-control"
id="example-input-4"
placeholder="Placeholder"
value="Example"
/>
</div>
<div class="form-group">
<label class="sr-only" for="example-input-5"></label>
<input
type="text"
name="example-input-5"
class="form-control"
id="example-input-5"
placeholder="Placeholder"
disabled
/>
</div>
<div class="form-group">
<label class="sr-only" for="example-input-6"></label>
<input
type="text"
name="example-input-6"
class="form-control"
id="example-input-6"
placeholder="Placeholder"
value="Example"
disabled
/>
</div>
<div class="form-group">
<label for="example-input-7">Field Label <sup>*</sup></label>
<input
type="text"
name="example-input-7"
class="form-control"
id="example-input-7"
placeholder="Placeholder"
required
/>
</div>
<div class="form-group">
<label for="example-input-8">Field Label <sup>*</sup></label>
<input
type="text"
name="example-input-8"
class="form-control"
id="example-input-8"
placeholder="Placeholder"
aria-describedby="example-input-8"
required
/>
</div>
<div class="form-group">
<label for="example-input-9">Field Label (Optional)</label>
<input
type="text"
name="example-input-9"
class="form-control"
id="example-input-9"
placeholder="Placeholder"
/>
</div>
<div class="form-group">
<label for="example-input-10">Field Label (Optional)</label>
<input
type="text"
name="example-input-10"
class="form-control"
id="example-input-10"
placeholder="Placeholder"
value="Example"
/>
</div>
<div class="custom-control custom-switch custom-switch-space-between mb-2">
<input type="checkbox" class="custom-control-input" id="custom-switch-1" checked>
<div class="custom-switch-text">Space Between (ON)</div>
<label class="custom-control-label" for="custom-switch-1"></label>
</div>
<div class="custom-control custom-switch custom-switch-space-between mb-2">
<input type="checkbox" class="custom-control-input" id="custom-switch-2">
<div class="custom-switch-text">Space Between (OFF)</div>
<label class="custom-control-label" for="custom-switch-2"></label>
</div>
<div class="custom-control custom-switch custom-switch-space-between">
<input type="checkbox" class="custom-control-input" id="custom-switch-3" disabled>
<div class="custom-switch-text">Space Between (Disabled)</div>
<label class="custom-control-label" for="custom-switch-3"></label>
</div>
<div class="custom-control custom-switch mb-2">
<input type="checkbox" class="custom-control-input" id="custom-switch-7" checked>
<label class="custom-control-label" for="custom-switch-7"></label>
<div class="custom-switch-text ml-2">Left Aligned (ON)</div>
</div>
<div class="custom-control custom-switch mb-2">
<input type="checkbox" class="custom-control-input" id="custom-switch-8">
<label class="custom-control-label" for="custom-switch-8"></label>
<div class="custom-switch-text ml-2">Left Aligned (OFF)</div>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="custom-switch-9" disabled>
<label class="custom-control-label" for="custom-switch-9"></label>
<div class="custom-switch-text ml-2">Left Aligned (Disabled)</div>
</div>
<div class="custom-control custom-switch mb-2">
<input type="checkbox" class="custom-control-input" id="custom-switch-4" checked>
<label class="custom-control-label" for="custom-switch-4"></label>
</div>
<div class="custom-control custom-switch mb-2">
<input type="checkbox" class="custom-control-input" id="custom-switch-5">
<label class="custom-control-label" for="custom-switch-5"></label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="custom-switch-6" disabled>
<label class="custom-control-label" for="custom-switch-6"></label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" id="custom-radio-1" name="custom-radio" class="custom-control-input" checked>
<label class="custom-control-label" for="custom-radio-1">Selected</label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" id="custom-radio-2" name="custom-radio" class="custom-control-input">
<label class="custom-control-label" for="custom-radio-2">Unselected</label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" id="custom-radio-3" name="custom-radio" class="custom-control-input" disabled>
<label class="custom-control-label" for="custom-radio-3">Disabled</label>
</div>
<div class="custom-control custom-radio custom-control-sm mb-2">
<input
type="radio"
id="custom-radio-small-font-size"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-small-font-size">Small Font Size</label>
</div>
<div class="custom-control custom-radio custom-control-right-next mb-2">
<input
type="radio"
id="custom-radio-right-aligned"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-right-aligned">Right Aligned</label>
</div>
<div class="custom-control custom-radio custom-control-no-text">
<input type="radio" id="custom-radio-no-text" name="custom-radio" class="custom-control-input">
<label class="custom-control-label" for="custom-radio-no-text"></label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="custom-check-1">
<label class="custom-control-label" for="custom-check-1">Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="custom-check-2" checked>
<label class="custom-control-label" for="custom-check-2">Checked</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="custom-check-disabled-1" disabled>
<label class="custom-control-label" for="custom-check-disabled-1">Disabled</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="custom-check-disabled-2" checked disabled>
<label class="custom-control-label" for="custom-check-disabled-2">Disabled Checked</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input
type="checkbox"
class="custom-control-input custom-control-input-indeterminate"
id="custom-check-3"
checked
>
<label class="custom-control-label" for="custom-check-3">Some Checked</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input
type="checkbox"
class="custom-control-input custom-control-input-indeterminate"
id="custom-check-4"
checked
disabled
>
<label class="custom-control-label" for="custom-check-4">Some Checked Disabled</label>
</div>
<div class="custom-control custom-checkbox custom-control-sm mb-2">
<input type="checkbox" class="custom-control-input" id="custom-check-small-font-size">
<label class="custom-control-label" for="custom-check-small-font-size">Small Font Size</label>
</div>
<div class="custom-control custom-checkbox custom-control-right-next mb-2">
<input type="checkbox" class="custom-control-input" id="custom-check-right-aligned">
<label class="custom-control-label" for="custom-check-right-aligned">Right Aligned</label>
</div>
<div class="custom-control custom-checkbox custom-control-no-text">
<input type="checkbox" class="custom-control-input" id="custom-check-no-text">
<label class="custom-control-label" for="custom-check-no-text"></label>
</div>
You can link checkboxes to create check-all functionality. This is availeble via data-attributes and javascript API.
data-check-all-main="group-name"
data-check-all-secondary="group-name"
<div class="custom-control custom-checkbox mb-2">
<input
type="checkbox"
class="custom-control-input"
id="main-check"
data-check-all-main="size-options"
>
<label class="custom-control-label" for="main-check">Check All</label>
</div>
<hr />
<div class="custom-control custom-checkbox mb-2">
<input
type="checkbox"
class="custom-control-input"
id="secondary-check-1"
data-check-all-secondary="size-options"
>
<label class="custom-control-label" for="secondary-check-1">Small</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input
type="checkbox"
class="custom-control-input"
id="secondary-check-2"
data-check-all-secondary="size-options"
>
<label class="custom-control-label" for="secondary-check-2">Medium</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input
type="checkbox"
class="custom-control-input"
id="secondary-check-3"
data-check-all-secondary="size-options"
disabled
>
<label class="custom-control-label" for="secondary-check-3">Large (sold out)</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input
type="checkbox"
class="custom-control-input"
id="secondary-check-4"
data-check-all-secondary="size-options"
>
<label class="custom-control-label" for="secondary-check-4">Extra-Large</label>
</div>
As an alternative to data-attributes, you can use the following javascript API.
Method | Syntax | Parameters | Description | Returned value |
---|---|---|---|---|
<constructor>
|
new RAUL.CheckAll(secondaryCheckboxesSelector,
mainCheckboxSelector, searchWithinElement)
|
- required - required
- optional |
Creates a new check-all instance. |
New check-all instance |
#areAllCheckboxChecked
|
checkAll.areAllCheckboxChecked()
|
N/A | Returns a boolean value specifying if all of the secondary checkboxes are checked. | boolean |
#isAnyCheckboxChecked
|
checkAll.isAnyCheckboxChecked()
|
N/A | Returns a boolean value specifying if at least one of the secondary checkboxes are checked. | boolean |
#markCheckboxesAs
|
checkAll.markCheckboxesAs(value)
|
- required value (boolean)
|
If value is true , marks all checkboxes as checked.
If value is false , marks all checkboxes as unchecked.
|
N/A |
< fn> = contructor method
# fn = instance method
|
<div class="form-group">
<label for="example-input-11">Field Label</label>
<div class="form-control-wrapper">
<input
type="search"
name="example-input-11"
class="form-control"
id="example-input-11"
placeholder="Placeholder"
/>
<div class="form-icon-box">
<i class="fa fa-search form-icon form-icon-search form-icon-grey" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="form-group">
<label for="example-input-12">Field Label</label>
<div class="form-control-wrapper">
<input
type="search"
name="example-input-12"
class="form-control"
id="example-input-12"
placeholder="Placeholder"
value="Example"
/>
<div class="form-icon-box">
<i class="fa fa-search form-icon form-icon-search form-icon-grey" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="form-group">
<div class="form-control-wrapper">
<select class="form-control custom-select" id="example-input-13">
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div class="form-icon-box">
<i class="fa fa-chevron-down form-icon form-icon-arrow" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="input-group mb-2">
<label class="sr-only" for="example-input-15"></label>
<input
type="text"
name="example-input-15"
class="form-control"
id="example-input-15"
placeholder="Username"
/>
<div class="input-group-append">
<div
class="input-group-text"
aria-label="Tool tip info message"
data-tooltip="Tool tip info message. This is a example for tooltip with long info text"
data-tooltip-pos="top-left"
>
<i class="fa fa-info-circle form-info-box-icon" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="input-group mb-2">
<div class="form-control-wrapper">
<select class="form-control custom-select" id="example-input-16" required>
<option>Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div class="form-icon-box">
<i class="fa fa-chevron-down form-icon form-icon-arrow" aria-hidden="true"></i>
</div>
</div>
<div class="input-group-append">
<div
class="input-group-text"
aria-label="Tool tip info message"
data-tooltip="Tool tip info message"
data-tooltip-pos="top-left"
>
<i class="fa fa-info-circle form-info-box-icon" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="form-group">
<textarea
name="example-input-17"
class="form-control form-textarea-sm"
id="example-input-17"
>Example</textarea>
</div>
<div class="form-group">
<textarea
name="example-input-18"
class="form-control form-textarea"
id="example-input-18"
placeholder="Placeholder"
></textarea>
</div>
<div class="form-group">
<label for="example-input-19" class="form-input-label">Field Label</label>
<input
type="text"
name="example-input-19"
class="form-control is-valid"
id="example-input-19"
value="UX Power Tools"
/>
<div class="valid-feedback">
Success message!
</div>
</div>
<div class="form-group">
<label for="example-input-20" class="form-input-label">Field Label</label>
<input
type="text"
name="example-input-20"
class="form-control is-invalid"
id="example-input-20"
value="UX Power Tools"
/>
<div class="invalid-feedback">
Error message!
</div>
</div>