Hint
Hints are used to provide subtle, contextual guidance beneath input fields. They help users understand what information is expected or provide feedback about the current state of an input.
Basic Usage
The default hint displays an info icon with subtle text styling.
This is a hint text to help users.
States
Hints come in three states to communicate different types of information.
Default
Used for general guidance and helper text.
This is a hint text to help users.
This is a hint text to help users.
Disabled
Used when the associated input is disabled.
This field is currently unavailable.
This field is currently unavailable.
Error
Used to display validation errors or important warnings.
This field is required.
This field is required.
Sizes
Hints come in two sizes to match different input field sizes.
Small hint (14px)
Large hint (16px)
Without Icon
You can hide the icon for a text-only hint.
Hint without icon.
Error hint without icon.
Custom Icon
You can provide a custom icon to replace the default info icon.
Custom icon hint.
All States Overview
A complete overview showing all hint variants.
| State | Small | Large |
|---|---|---|
| Default | Hint text | Hint text |
| Disabled | Hint text | Hint text |
| Error | Hint text | Hint text |
| No Icon | Hint text | Hint text |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | default, disabled, error | default | The visual state of the hint |
| size | sm, lg | sm | The size of the hint text |
| showIcon | boolean | true | Whether to show the icon |
| icon | React.ReactNode | InfoCircle | Custom icon to display |
| children | React.ReactNode | - | Hint text content |
| className | string | - | Additional CSS classes |