interface MyInputProps extends WrappedFieldProps<string> {
placeholder?: string;
}
export const MyInputField = asCommandFormField<MyInputProps>(
(props) => (
<div>
<input
value={props.value}
onChange={props.onChange}
placeholder={props.placeholder}
className={props.invalid ? 'invalid' : ''}
/>
{props.errors.length > 0 && (
<div className="error-messages">
{props.errors.map((error, idx) => (
<small key={idx} className="p-error">{error}</small>
))}
</div>
)}
</div>
),
{
defaultValue: '',
extractValue: (e) => e.target.value
}
);
// Usage with explicit type (full type safety):
<MyInputField<SimpleCommand> value={c => c.name} placeholder="Name" />
Wraps a field component to work with CommandForm, handling all integration automatically. The returned component is generic in TCommand, providing type safety for the value accessor while defaulting to any so explicit type arguments aren't required.