# 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: ```html Please enter your full name. ``` ## 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. ```html Passwords must be at least 8 characters long. Note: This field is required. ``` ## 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. ```html Password ``` ## 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. ```html Please enter your full name. ``` ## 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 ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `id` | string | `` | The id of the helper text element. Use it with `aria-describedby` on your input. | | `class` | string | `undefined` | Custom classes merged with the default helper text styles. | ### Snippets | Name | Description | | --- | --- | | `children` | The helper text content. It is required; a HelperText without content renders nothing. | --- Category: Components Keywords: helper-text, hints, guidance, form, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt