Hint
A contextual guidance component for form fields with multiple variants. Provides clear feedback and instructions to users.
This is a default hint
Component Setup
Create or update your Hint component
Copy this code to create your Hint component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Disabled State
Hints can be disabled to indicate they are not applicable in the current context.
This is a disabled hint
Variants
Hints come in different variants to communicate different types of information.
Info
This is an informational hint
Warning
This is a warning hint
Error
This is an error hint
Success
This is a success hint
Custom Icon
Hints can be customized with different icons to better match their context.
This hint uses a custom warning icon
API Reference
The Hint component is a compound component that consists of several parts. Each part has its own set of props that can be used to customize its appearance and behavior.
Hint.Root
The container component that provides context for all other Hint components.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""info""error""success""warning" | "default" | The visual style variant of the hint. |
disabled | "boolean" | "false" | When true, applies disabled styling to the hint. |
className | "string" | "''" | Additional CSS classes to apply to the hint root. |
Hint.Icon
Renders an icon within the hint component. Uses a default icon based on the variant if no custom icon is provided.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ElementType" | "undefined" | The component to render as the icon. If not provided, uses the default icon for the selected variant. |
className | "string" | "''" | Additional CSS classes to apply to the icon. |
Hint.Text
The text content of the hint.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "''" | Additional CSS classes to apply to the text. |
children | "ReactNode" | "undefined" | The content to display as the hint text. |