Helper Text Component

Figma

The glu-helper-text component displays a helper message with an optional icon on the left and text content on the right. The icon is rendered via the glu-icon component, and the text is provided through the default slot. Additionally, the component supports error styling by setting the isError property.

Basic Usage

Example 1: Standard Helper Text

HTML

Result

Loading...

Live Editor

<glu-helper-text icon="information-circle" icon-variant="outline">
  This is a helper message.
</glu-helper-text>

React

Result

Loading...

Live Editor

<GluHelperText icon="information-circle" iconVariant="outline">
  This is a helper message.
</GluHelperText>

Vue

<glu-helper-text icon="information-circle" icon-variant="outline">
  This is a helper message.
</glu-helper-text>

<script setup>
import { GluHelperText } from '@gelato-ui/vue';
</script>

Angular

<glu-helper-text icon="information-circle" icon-variant="outline">
  This is a helper message.
</glu-helper-text>

import { Component } from '@angular/core';
import { GluHelperText } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluHelperText],
  template: `<glu-helper-text icon="information-circle" icon-variant="outline">
               This is a helper message.
             </glu-helper-text>`
})
export class MyComponent {}

---

Error State

Enable error styling by setting the isError property. This is useful for displaying error messages with appropriate visual cues.

HTML

Result

Loading...

Live Editor

<glu-helper-text icon="information-circle" icon-variant="outline" is-error>
  This is an error message.
</glu-helper-text>

React

Result

Loading...

Live Editor

<GluHelperText icon="information-circle" iconVariant="outline" isError>
  This is an error message.
</GluHelperText>

Vue

<glu-helper-text icon="information-circle" icon-variant="outline" is-error>
  This is an error message.
</glu-helper-text>

<script setup>
import { GluHelperText } from '@gelato-ui/vue';
</script>

Angular

<glu-helper-text icon="information-circle" icon-variant="outline" is-error>
  This is an error message.
</glu-helper-text>

import { Component } from '@angular/core';
import { GluHelperText } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluHelperText],
  template: `<glu-helper-text icon="information-circle" icon-variant="outline" is-error>
               This is an error message.
             </glu-helper-text>`
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
icon	icon	The name of the icon to display. The provided value should correspond to a valid icon in the glu-icon component.	string	undefined
iconVariant	icon-variant	Specifies the visual style variant of the icon. Possible values: - solid: renders the solid version of the icon. - outline: renders the outlined version of the icon.	"outline" | "solid"	'outline'
isError	is-error	When set to true, applies error styling to the helper text.	boolean	false

Dependencies

Used by

• glu-checkbox
• glu-input
• glu-radio
• glu-toggle

Depends on

• glu-icon

Graph

---

Built with StencilJS