Part 58: Building Form Components: Inputs, Checkboxes & Selects

Accessible, responsive form inputs with error and focus states.

1. Accessible Input Field with Error Feedback

export function TextInput({ label, error, ...props }) {
  return (
    <div className="flex flex-col gap-1.5 mb-4">
      {label && <label className="text-sm font-semibold text-slate-700 dark:text-slate-200">{label}</label>}
      <input 
        className={`px-3.5 py-2.5 rounded-xl border text-sm transition focus:outline-none focus:ring-2 ${
          error 
            ? 'border-red-300 focus:border-red-500 focus:ring-red-200 bg-red-50/50' 
            : 'border-slate-200 focus:border-blue-500 focus:ring-blue-100'
        }`} 
        {...props} 
      />
      {error && <span className="text-xs text-red-500 font-medium">{error}</span>}
    </div>
  );
}

Key Takeaways

• Bind validation error states to border colors and soft background tints.

In Part 59, we will build Feedback Components: Modals, Drawers & Tooltips!