Helper Text

A lightweight component designed to provide additional context or guidance for form inputs, such as descriptions, hints, or error messages. It supports both plain text and dynamic content for flexibility.

About

The Helper component is used to display supplementary information related to form inputs, such as instructions, hints, or validation messages. It is highly customizable and works seamlessly alongside inputs, labels, and other form elements. The component supports both static text and dynamic content (via Svelte snippets), making it versatile for various use cases.

Example

To use the Helper component, pass the content prop with the desired text or snippet. Here's a basic example:

Svelte 
<script>
  import { Helper } from "theui-svelte";
</script>

<Helper content="Please enter your full name." />

Helper Text Content

The content prop defines the text or snippet to be displayed as helper text.

It supports both strings and Snippets for static or dynamic content. Strings render as text or HTML, while Snippets allow custom components or HTML. This makes the Helper component flexible for hints, messages, or interactive content.

Svelte 
<!-- Helper text as plain string -->
<Helper content="Passwords must be at least 8 characters long." />
<!-- Helper text as HTML string -->
<Helper content="<strong>Note:</strong> This field is required." />
<!-- Helper text as Snippet -->
<Helper>
  <!-- Custom elements for the content snippet-->
</Helper>

Customization

The Helper component can be customized using the class attribute to apply additional styles or override default ones.

Svelte 
<Helper content="..." class="text-blue-600 italic" />

Accessibility

HelperText gives users additional guidance without distraction. It's screen reader-friendly through aria-describedby, and styled to stay secondary in visual hierarchy. It accepts both plain text and render functions for flexibility.

Configuration