Components / Forms

Hint

A small blue question icon that reveals supporting detail in a popover. Optional everywhere it appears. Drop it beside a Label or a Field/Fieldset legend. The requiredflag adds a “Required” note so the hint stays in sync with a required label.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/hint/registry.json

Also installs the popover dependency.

Basic

Click the blue icon to open the popover.

Hint

Tax file number

tsx

import { Hint } from "@/components/ui/hint"

<div className="flex items-center gap-1.5">
  <span className="text-sm font-medium">Tax file number</span>
  <Hint>Optional. We use it only for end-of-year statements.</Hint>
</div>

Title and required

Add a title and the required note for fields that must be filled in.

Hint · title + required

Owners corporation *

tsx

<Hint title="Owners corporation" required>
  Use the legal entity name exactly as it appears on your strata roll.
</Hint>

Hint props

Prop	Type	Default	Description
title	ReactNode	-	Optional heading shown at the top of the popover.
required	boolean	false	Surfaces a "Required" note in the popover header, keeping it in sync with a required label.
label	string	"More info"	Accessible label for the trigger button.
children	ReactNode	-	Popover body content.