Helper Text

The text under a form field: a description, a hint or an error message. It takes plain text or any markup you put inside it.

About

The HelperText component shows a hint, an instruction or a validation message under a form input. Everything you place inside it becomes the helper text, so it can hold plain text or any elements and components.

The Input, Select and FileInput components use it internally through their helperText prop, which also links it to the input with aria-describedby. Use HelperText directly when you build a field yourself.

Example

To use the HelperText component, place the text inside it. Here's a basic example:

Please enter your full name.
Svelte 
<script>
  import { HelperText } from "theui-svelte";
</script>

<HelperText>Please enter your full name.</HelperText>

Helper Text Content

The content can be plain text or any mix of elements and components, which makes it flexible for hints, messages, or interactive content. A HelperText without content renders nothing.

Passwords must be at least 8 characters long.
Note: This field is required.
Svelte 
<!-- Plain text -->
<HelperText>Passwords must be at least 8 characters long.</HelperText>

<!-- With elements -->
<HelperText><strong>Note:</strong> This field is required.</HelperText>

Use With an Input

With Input, Select and FileInput, pass the helper text through the helperText prop instead of using the component directly. Those components render a HelperText for you, give it an id and link it to the input with aria-describedby, so screen readers read it together with the label.

Must be at least 8 characters long
Svelte 
<Input name="password" type="password" helperText="Must be at least 8 characters long">Password</Input>

Customization

The HelperText component can be customized using the class attribute to apply additional styles or override default ones. Any other attributes you add, like id or data-*, are passed to the element.

Please enter your full name.
Svelte 
<HelperText class="text-blue-600 italic">Please enter your full name.</HelperText>

Accessibility

HelperText gives users additional guidance without distraction, and is styled to stay secondary in the visual hierarchy. When you use it through the helperText prop of an input, it is connected to that input with aria-describedby automatically. When you use the component directly, give it an id and add aria-describedby with that id to your input, so screen readers announce the two together.

Configuration