The Fluxbit::Form::HelpTextComponent is a simple helper text component that extends Fluxbit::Form::Component. It provides styled text elements for displaying helper information, validation messages, and explanatory content below form fields. The component supports different color schemes to indicate various states like success, error, warning, and informational messages.

Attention: This component isn’t used alone. It is used with the other form components.

To start using the help text you can use the default way to call the component:

<%= render Fluxbit::Form::HelpTextComponent.new.with_content('Your password must be at least 8 characters.') %>

<!-- or -->

<%= render Fluxbit::Form::HelpTextComponent.new do %>
  Your password must be at least 8 characters.
<% end %>

or you can use the alias (from the helpers):

<%= fx_help_text(with_content: 'Your password must be at least 8 characters.') %>

<!-- or -->

<%= fx_help_text do %>
  Your password must be at least 8 characters.
<% end %>

The result is:

Options

Param Default Description
color: :default Color scheme of the help text (:default, :success, :danger, :info, :warning)
remove_class: ”” Classes to be removed from the default class list
**props   Additional HTML attributes for the paragraph element

Slots

This component does not define any named slots. The help text content is provided through the default block or with_content method:

<%= fx_help_text(color: :success) do %>
  This is the help text content
<% end %>

Examples

Default help text

Different color states

Success messages

Error messages

Warning messages

Info messages

Multi-line help text

Help text with form fields

Rich content help text

Adding/Removing classes

Adding other properties

When to use

Use HelpText for:

  • Field instructions: Explaining how to fill out a form field correctly
  • Validation feedback: Displaying success, error, or warning messages
  • Format requirements: Specifying password criteria, file formats, or data formats
  • Additional context: Providing extra information about form fields
  • Error descriptions: Detailed error messages for failed validations
  • Character limits: Showing remaining characters or length requirements
  • Privacy notices: Brief explanations about data usage

Color Usage Guidelines

  • :default (gray): General instructions and neutral information
  • :success (green): Positive feedback, successful validations
  • :danger (red): Error messages, validation failures, warnings about destructive actions
  • :warning (yellow): Caution messages, non-critical issues
  • :info (cyan): Additional information, tips, helpful context

Accessibility

  • Uses semantic <p> element for proper screen reader support
  • Color-coded text maintains sufficient contrast ratios
  • Can be associated with form fields using ARIA attributes
  • Supports all standard HTML attributes for enhanced accessibility
  • Works well with screen readers when used as field descriptions

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:

# /config/initializers/change_help_text_component_defaults.rb

Fluxbit::Config::Form::HelpTextComponent.color = :info # the default is :default
Fluxbit::Config::Form::HelpTextComponent.styles[:base] = 'text-xs ' # the default is 'text-sm '
Fluxbit::Config::Form::HelpTextComponent.styles[:colors][:custom] = 'text-purple-600 dark:text-purple-400' # add custom color

Dependencies

Styles 

<%= html_escape(JSON.pretty_generate(Fluxbit::Config::Form::HelpTextComponent.styles)) %>

References

Flowbite Helper Text