InputField
The form workhorse. Wraps Input with Label, hint/error states, help tooltip, and leading/trailing icon or addon slots. Pass id for the accessibility plumbing (htmlFor + aria-describedby).
$npx shadcn@latest add https://ui.btng.studio/r/input-field
Basic
Label + Input with a hint underneath.
We'll never share your email.
Required + help tooltip
Red asterisk when required; `help` surfaces a HelpIcon next to the label.
With leading icon
Pass any Phosphor icon as leadingIcon. 16px, centred, muted colour.
With addon
leadingAddon / trailingAddon render as pre-input badges (currency, domain, unit).
€EUR
Error state
Pass error to switch to destructive styling. Renders a WarningCircle + message below the input.
Enter a valid email address.
Disabled
Disables the whole field (label, input, and visuals dim to 50%).
SKU is auto-generated.