12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- ---
- title: Form helpers
- summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
- description: Provide additional guidance in forms.
- ---
- ## Input help
- Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class.
- ```html
- <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>...</p>">?</span>
- ```
- Look at the example below to see how the input help works:
- ```html example centered height="25rem" columns={1}
- <div>
- <label class="form-label">
- ZIP Code
- <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
- </label>
- <input type="text" class="form-control" placeholder="Your ZIP Code">
- </div>
- ```
- ## Required field
- Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
- ```html
- <label class="form-label required">Required</label>
- ```
- Look at the example below to see how the required field works:
- ```html example centered columns={1}
- <div>
- <label class="form-label required">Required</label>
- <input type="text" class="form-control" name="..." placeholder="Required...">
- </div>
- ```
- ## Form hint
- Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class.
- ```html
- <div class="form-hint">We'll never share your email with anyone else.</div>
- ```
- Look at the example below to see how the form hint works:
- ```html example centered columns={1}
- <div>
- <label class="form-label">Email address</label>
- <input type="email" class="form-control" placeholder="Enter your email address">
- <div class="form-hint">We'll never share your email with anyone else.</div>
- </div>
- ```
- ## Additional info inside label
- Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
- ```html
- <label class="form-label">Textarea <span class="form-label-description">56/100</span>
- </label>
- ```
- This example shows how to use the additional info inside the label:
- ```html example centered columns={1} height="15rem"
- <div>
- <label class="form-label">Textarea <span class="form-label-description">56/100</span>
- </label>
- <textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea>
- </div>
- ```
|