Hint

Standard

Default

Use the default hint to give users helpful information alongside a form field.

It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'.

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-hint">
  It&#39;s on your National Insurance card, benefit letter, payslip or P60.
  For example, &#39;QQ 12 34 56 C&#39;.
</div>

---
import { Hint } from "@i-dot-ai-npm/component-library-astro";
---

<Hint>
  It&#39;s on your National Insurance card, benefit letter, payslip or P60.
  For example, &#39;QQ 12 34 56 C&#39;.
</Hint>

import { Hint } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Hint>
      It&#39;s on your National Insurance card, benefit letter, payslip or P60.
      For example, &#39;QQ 12 34 56 C&#39;.
    </Hint>
  );
}

<script>
  import { Hint } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Hint>
  It&#39;s on your National Insurance card, benefit letter, payslip or P60.
  For example, &#39;QQ 12 34 56 C&#39;.
</Hint>

import { Hint } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Hint>
      It&#39;s on your National Insurance card, benefit letter, payslip or P60.
      For example, &#39;QQ 12 34 56 C&#39;.
    </Hint>
  );
}

No "when to use" guidance was found for this component.