41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import React from 'react'
|
||
|
||
/**
|
||
* Nova FormField – thin wrapper that pairs a label with any input-like child,
|
||
* plus optional hint and error text. Use this for custom controls (NovaSelect,
|
||
* Toggle, etc.) that don't carry their own label.
|
||
*
|
||
* @prop {string} label - visible label text
|
||
* @prop {boolean} required - shows red asterisk
|
||
* @prop {string} error - validation error message
|
||
* @prop {string} hint - helper text shown below control
|
||
* @prop {string} htmlFor - id of the labelled element
|
||
*/
|
||
export default function FormField({ label, required, error, hint, htmlFor, children, className = '' }) {
|
||
return (
|
||
<div className={`flex flex-col gap-1.5 ${className}`}>
|
||
{label && (
|
||
<label
|
||
htmlFor={htmlFor}
|
||
className="text-sm font-medium text-white/85 select-none"
|
||
>
|
||
{label}
|
||
{required && <span className="text-red-400 ml-1">*</span>}
|
||
</label>
|
||
)}
|
||
|
||
{children}
|
||
|
||
{error && (
|
||
<p role="alert" className="text-xs text-red-400">
|
||
{error}
|
||
</p>
|
||
)}
|
||
|
||
{!error && hint && (
|
||
<p className="text-xs text-slate-500">{hint}</p>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|