FormLabelWithHelp

src/lib/components/forms/FormLabelWithHelp.svelte

Purpose

Renders a help-circle icon next to a form label that, on hover/focus, shows a tooltip with explanatory text. Use it inline within a label row to give users context about a field without cluttering the form layout.

Origin

Custom — Primebrick-written. Wraps the shadcn-svelte™ Tooltip primitive and the Lucide™ HelpCircle icon.

Usage

Default

Code
<label class="flex items-center gap-1">
  {$t('users.fields.email')}
  <FormLabelWithHelp text={$t('users.fields.emailHelp')} />
</label>

Inside a form field

Code
<div class="space-y-1">
  <label class="flex items-center gap-1">
    {$t('settings.fields.oidcIssuerUrl')}
    <FormLabelWithHelp text={$t('settings.fields.oidcIssuerUrlHelp')} />
  </label>
  <Input bind:value={config.oidc_issuer_url} />
</div>

Props

Full prop table: see API reference — formlabelwithhelp.

Props: text: string — the tooltip content shown on hover/focus.

Next steps

• Component catalog
• UI stack
• API reference