Forms / React + CSS
Email field
A visible label, a helpful hint, and an error that explains the next step.
"use client";
import styles from "./EmailField.module.css";
import { useId } from "react";
export default function EmailField({
value = "",
onChange,
error = "",
label = "Email address",
}) {
const id = useId();
return (
<div className={styles.field}>
<label htmlFor={id}>{label}</label>
<input
id={id}
type="email"
autoComplete="email"
required
value={value}
onChange={(event) => onChange?.(event.target.value)}
aria-invalid={Boolean(error)}
aria-describedby={id + "-hint"}
placeholder="you@company.com"
/>
<p id={id + "-hint"}>
{error || "Use the address where you want to receive updates."}
</p>
</div>
);
}
Make it yours
Place this field inside a form and validate on submit or blur. Browser validation helps users; validate again on the server before processing any real submission.
- Use a React project with CSS Modules support, such as Next.js or Vite.
- Save the JSX as
EmailField.jsxand the CSS asEmailField.module.cssin the same folder. - Import
EmailFieldand connect its props to your application. Controlled components need parent state and change handlers.
No third-party component or animation package is required. Use the theme controls to adjust accent, corners, spacing, and type. Copy the Theme CSS into your stylesheet and wrap your components in <div className="tdp-components">. The theme applies to every component inside that wrapper. TDP defaults work without a theme file.
Props
| Prop | Type | Use |
|---|---|---|
value | string | Controlled email value. |
onChange | function | Receives the entered string. |
error | string | Validation message, empty when valid. |
label | string | Visible input label. |
Accessibility & behavior
The label is connected with useId. The hint or error is linked through aria-describedby and aria-invalid reflects the error state. Do not use the placeholder as the only label.
Visible focus styles and reduced-motion support are included. Check labels, contrast, keyboard behavior, and screen-reader output again after adapting the component to your product.