Input & Label

function Demo() {
  const [val, setVal] = useState("");
  return (
    <div className="space-y-1 max-w-sm">
      <Label htmlFor="name" required>Display name</Label>
      <Input
        id="name"
        placeholder="Enter your name"
        value={val}
        onChange={(e) => setVal(e.target.value)}
      />
    </div>
  );
}
render(<Demo />);

function Demo() {
  const [val, setVal] = useState("");
  const hasError = val.length > 0 && val.length < 3;
  return (
    <div className="space-y-1 max-w-sm">
      <Label htmlFor="username">Username</Label>
      <Input
        id="username"
        placeholder="min 3 characters"
        value={val}
        onChange={(e) => setVal(e.target.value)}
        error={hasError}
      />
      {hasError && <p className="text-xs text-red-500 mt-1">Must be at least 3 characters.</p>}
    </div>
  );
}
render(<Demo />);