mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
82 lines
3.7 KiB
Plaintext
82 lines
3.7 KiB
Plaintext
---
|
|
title: Helpers
|
|
seoTitle: Form helpers
|
|
order: 4
|
|
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: Add help icons, hints, and required field markers to forms to give users extra guidance and reduce input errors.
|
|
related: [/ui/forms/elements, /ui/components/popover]
|
|
---
|
|
import FormHint from '@ui/FormHint.astro';
|
|
import Example from '@components/Example.astro';
|
|
|
|
## 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:
|
|
|
|
<Example column>
|
|
<div>
|
|
<label class="form-label" for="helper-zip"> 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" id="helper-zip" class="form-control" placeholder="Your ZIP Code" />
|
|
</div>
|
|
</Example>
|
|
|
|
## Required field
|
|
|
|
Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label. The class only draws the asterisk, so put the `required` attribute on the field as well - that is what a screen reader and the browser's own validation read.
|
|
|
|
<Example column>
|
|
<div>
|
|
<label class="form-label required" for="helper-required">Required</label>
|
|
<input type="text" id="helper-required" class="form-control" name="..." placeholder="Required..." required />
|
|
</div>
|
|
</Example>
|
|
|
|
## 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. Give the hint an `id` and point the field at it with `aria-describedby`, so the hint is read together with the field.
|
|
|
|
```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:
|
|
|
|
<Example column>
|
|
<div>
|
|
<label class="form-label" for="helper-email">Email address</label>
|
|
<input type="email" id="helper-email" class="form-control" placeholder="Enter your email address" aria-describedby="helper-email-hint" />
|
|
<FormHint id="helper-email-hint">We'll never share your email with anyone else.</FormHint>
|
|
</div>
|
|
</Example>
|
|
|
|
## 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.
|
|
|
|
<Example column>
|
|
<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>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- Give the hint an `id` and point the field at it with `aria-describedby`. A hint that only sits next to the field is not connected to it.
|
|
- The `required` class draws the asterisk; the `required` attribute is what a screen reader and the browser's validation read. Use both.
|
|
- The `form-help` popover is opened by click, so its content is reachable - but keep it for extra detail, never for something users must read to fill the field in.
|
|
- One `aria-describedby` can point at several ids. Use that to read a hint and an error message together, rather than replacing one with the other.
|