Hint - HapplyUI

A hint text component for form fields with icon support, error/disabled states, and a composed shorthand. Defaults to RiInformationFill icon.

Installation

bunx @happlyui/cli@latest add hint

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
polymorphic
recursive-clone-children
tv

Usage

import * as Hint from "@/components/ui/hint"

<Hint.Root>
  <Hint.Icon />
  This is a hint text.
</Hint.Root>

Examples

Demo

Hint with default icon and text.

This is a hint text to help user.

<Hint.Root>
  <Hint.Icon />
  This is a hint text to help user.
</Hint.Root>

Disabled

Hint in disabled state.

This is a hint text to help user.

<Hint.Root disabled>
  <Hint.Icon />
  This is a hint text to help user.
</Hint.Root>

Has Error

Hint in error state.

This is a hint text to help user.

<Hint.Root hasError>
  <Hint.Icon />
  This is a hint text to help user.
</Hint.Root>

Custom Icon

Hint with a custom icon via the `as` prop.

This hint uses a custom icon.

<Hint.Root>
  <Hint.Icon as={RiAlertFill} />
  This hint uses a custom icon.
</Hint.Root>

Composed

Props-driven hint with default icon, error, and disabled states.

This is a hint with default icon.

This is a hint with custom icon.

This hint has an error.

This hint is disabled.

<Hint.Composed>This is a hint with default icon.</Hint.Composed>

<Hint.Composed icon={RiAlertFill}>
  This is a hint with custom icon.
</Hint.Composed>

<Hint.Composed hasError>This hint has an error.</Hint.Composed>

<Hint.Composed disabled>This hint is disabled.</Hint.Composed>

API Reference

Hint.Root

The root hint container.

Prop	Type	Default	Description
`hasError`	`boolean`	`false`	Show error styling
`disabled`	`boolean`	`false`	Show disabled styling

Hint.Icon

Icon displayed before the hint text. Defaults to RiInformationFill.

Prop	Type	Default	Description
`as`	`React.ElementType`	`RiInformationFill`	The icon component to render

Hint.Composed

Props-driven hint with a built-in default icon. Pass custom icon via the icon prop.

Prop	Type	Default	Description
`icon`	`React.ElementType`	`RiInformationFill`	Custom icon component. Defaults to RiInformationFill.
`hasError`	`boolean`	`false`	Show error styling
`disabled`	`boolean`	`false`	Show disabled styling