tabler/docs/content/ui/forms/form-helpers.md

title, summary, description

title	summary	description
Form helpers	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.	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.

<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:

{% capture html -%}

ZIP Code ?

{%- endcapture %} {% include "docs/example.html" html=html %}

Required field

Use the .required class to indicate that a field is required. It will add a red asterisk to the label.

{% capture html -%}

Required

{%- endcapture %} {% include "docs/example.html" html=html %}

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.

<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:

{% capture html -%}

Email address

We'll never share your email with anyone else.

{%- endcapture %} {% include "docs/example.html" html=html %}

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.

{% capture html -%}

Textarea 56/100

{%- endcapture %} {% include "docs/example.html" html=html %}